資訊專欄INFORMATION COLUMN
摘要：英語(yǔ)為了防止用戶電腦里面，沒(méi)有微軟雅黑這個(gè)字體。因?yàn)榻^對(duì)定位脫離標(biāo)準(zhǔn)流，影響頁(yè)面的布局。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動(dòng)盒子居中title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
height: 300px;
background-color: red;
}
.main{
width: 100px;
overflow: hidden;
margin: 0 auto;
}
.child{
width: 100px;
height: 100px;
background-color: blueviolet;
margin: 0 auto;
float: left;
}
style>
head>
<body>
<div class="father">
<div class="main">
<div class="child">
div>
div>
div>
body>
html>
浮動(dòng)盒子居中
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
1.網(wǎng)頁(yè)中不是所有字體都能用哦，因?yàn)檫@個(gè)字體要看用戶的電腦里面裝沒(méi)裝，
比如你設(shè)置： font-family: "華文彩云"; 如果用戶電腦里面沒(méi)有這個(gè)字體，
那么就會(huì)變成宋體
頁(yè)面中，中文我們只使用： 微軟雅黑、宋體、黑體。
如果頁(yè)面中，需要其他的字體，那么需要切圖。 英語(yǔ)：Arial 、 Times New Roman
2.為了防止用戶電腦里面，沒(méi)有微軟雅黑這個(gè)字體。
就要用英語(yǔ)的逗號(hào)，隔開(kāi)備選字體，就是說(shuō)如果用戶電腦里面，
沒(méi)有安裝微軟雅黑字體，那么就是宋體：
font-family: "微軟雅黑","宋體"; 備選字體可以有無(wú)數(shù)個(gè)，用逗號(hào)隔開(kāi)。
3.我們要將英語(yǔ)字體，放在最前面，這樣所有的中文，就不能匹配英語(yǔ)字體，
就自動(dòng)的變?yōu)楹竺娴闹形淖煮w：
font-family: "Times New Roman","微軟雅黑","宋體";
4.所有的中文字體，都有英語(yǔ)別名，
我們也要知道： 微軟雅黑的英語(yǔ)別名：
font-family: "Microsoft YaHei";
宋體的英語(yǔ)別名： font-family: "SimSun";
font屬性能夠?qū)ont-size、line-height、font-family合三為一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高可以用百分比，表示字號(hào)的百分之多少。
一般來(lái)說(shuō)，都是大于100%的，因?yàn)樾懈咭欢ㄒ笥谧痔?hào)。
font:12px/200% “宋體” 等價(jià)于 font:12px/24px “宋體”;
反過(guò)來(lái)，比如： font:16px/48px “宋體”;
等價(jià)于 font:16px/300% “宋體”
字體設(shè)置
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
body{
text-decoration: underline;
}
div{
width: 200px;
height: 240px;
/*line-height: 200px;*/
background-color:red;
/*text-align: right;*/
/*兩端對(duì)齊*/
/*text-align: justify;*/
/*首行縮進(jìn)*/
/*text-indent: 2em;*/
/*font-size: 14px;*/
/*text-decoration: inherit;*/
/*font-weight: 800;*/
/*font-family: "Microsoft Yahei"*/
/*font-family: 華文行楷*/
font: 12px/240px 華文行楷;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: line-through;
}
style>
head>
<body>
<div>
武小豬武小豬
div>
<a href="#">百度一下a>
body>
html>
文本屬性和字體屬性
CSS雪碧 即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合并技術(shù)，該方法是將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背景定位來(lái)顯示需要顯示的圖片部分
CSS 雪碧圖應(yīng)用原理：
只有一張大的合并圖， 每個(gè)小圖標(biāo)節(jié)點(diǎn)如何顯示多帶帶的小圖標(biāo)呢？
其實(shí)就是 截取 大圖一部分顯示，而這部分就是一個(gè)小圖標(biāo)。
使用雪碧圖的好處：
1、利用CSS Sprites能很好地減少網(wǎng)頁(yè)的http請(qǐng)求，從而大大的提高頁(yè)面的性能，這也是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因；
2、CSS Sprites能減少圖片的字節(jié)，曾經(jīng)比較過(guò)多次3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和。
3、解決了網(wǎng)頁(yè)設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了，不需要對(duì)每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁(yè)的制作效率。
4、更換風(fēng)格方便，只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變。維護(hù)起來(lái)更加方便
不足：
1）CSS雪碧的最大問(wèn)題是內(nèi)存使用
2）拼圖維護(hù)比較麻煩
3）使CSS的編寫(xiě)變得困難
4）CSS 雪碧調(diào)用的圖片不能被打印
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
div{
height: 100px;
width: 200px;
/*background-color: rgb(0,255,255);*/
/*background-color: rgba(0,0,0,.6);*/
background: #999;
}
style>
head>
<body>
<div>div>
body>
html>
background
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相對(duì)定位title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
position: relative;
top: 20px;
left: 100px;
/*設(shè)置元素的堆疊順序*/
z-index: 5;
}
.box3{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
style>
head>
<body>
<div class="box1">div>
<div class="box2">div>
<div class="box3">div>
body>
html>
相對(duì)定位
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
*{
padding: 0;
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top:40px;
left:0;
}
.box3{
width: 250px;
height: 200px;
background-color: blue;
}
style>
head>
<body style="height: 2000px;">
<div class="box1">div>
<div class="box2">div>
<div class="box3">div>
body>
html>
絕對(duì)定位
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 992px;
height: 460px;
background-color: red;
float: right;
/*相對(duì)定位*/
position: relative;
}
.prev{
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
/*絕對(duì)位置*/
position: absolute;
background-color: #000;
color: #fff;
top: 50%;
left: 0px;
}
.next{
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
/*絕對(duì)位置*/
position: absolute;
background-color: #000;
color: #fff;
top: 50%;
right: 0;
}
style>
head>
<body>
<div class="father">
<span class="next">>span>
<span class="prev"><>
div>
body>
html>
父相子絕
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
*{
padding: 0;
margin: 0;
}
body{
font-size: 14px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
input{
border: 0;
outline: 0;
}
.father{
width: 100%;
height: 200px;
background-color: red;
position: relative文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1779.html
摘要：一丶盒模型的屬性重要是標(biāo)準(zhǔn)文檔流父子之間調(diào)整位置上下左右上下左右上左右下順時(shí)針上右下左三要素線性的寬度線性的樣式顏色實(shí)線小圓點(diǎn)一丶盒模型的屬性(重要) 1.padding padding是標(biāo)準(zhǔn)文檔流,父子之間調(diào)整位置 DOCTYPE html> padding *{ ...
摘要：固定塊元素的大小，其中包含我們的圖片，這使我們能夠在滿足尺寸要求的情況下，任何圖片都可用于制作成卡片。字體及其他博文鏈接利用制作精美的卡片源碼鏈接利用制作精美的卡片原文鏈接翻譯墨丶水瓶 本教程將會(huì)告訴你如何用 Html 和 Css 實(shí)現(xiàn)卡片界面。教程會(huì)重點(diǎn)使用 Css filter 屬性處理圖片，以便給它添加一些過(guò)渡效果。 第一步：確定 HTML 代碼結(jié)構(gòu) 在創(chuàng)建 HTML 代碼前，你...
摘要：固定塊元素的大小，其中包含我們的圖片，這使我們能夠在滿足尺寸要求的情況下，任何圖片都可用于制作成卡片。字體及其他博文鏈接利用制作精美的卡片源碼鏈接利用制作精美的卡片原文鏈接翻譯墨丶水瓶 本教程將會(huì)告訴你如何用 Html 和 Css 實(shí)現(xiàn)卡片界面。教程會(huì)重點(diǎn)使用 Css filter 屬性處理圖片，以便給它添加一些過(guò)渡效果。 第一步：確定 HTML 代碼結(jié)構(gòu) 在創(chuàng)建 HTML 代碼前，你...
摘要：本文參照深入了解虛擬機(jī)周志明，純粹做做筆記，寫(xiě)寫(xiě)自己覺(jué)得較為重要的內(nèi)容方便理解虛擬機(jī)運(yùn)行時(shí)數(shù)據(jù)區(qū)如下程序計(jì)數(shù)器程序計(jì)數(shù)器寄存器是一塊較小的內(nèi)存空間，看做是當(dāng)前線程所執(zhí)行的字節(jié)碼的行指示器。異常情況也與虛擬機(jī)棧一致。 本文參照深入了解Java虛擬機(jī)-周志明，純粹做做筆記，寫(xiě)寫(xiě)自己覺(jué)得較為重要的內(nèi)容方便理解 Java虛擬機(jī)運(yùn)行時(shí)數(shù)據(jù)區(qū)如下： showImg(https://segmentf...
摘要：功能數(shù)據(jù)綁定的雙向數(shù)據(jù)綁定，一方面可以做到變化驅(qū)動(dòng)了中元素變化，另一方面也可以做到元素的變化也會(huì)影響到。其次告訴，對(duì)頁(yè)面上的這個(gè)進(jìn)行雙向數(shù)據(jù)綁定。第三告訴，在這個(gè)指令模版上顯示這個(gè)的數(shù)據(jù)。作用域是一個(gè)把一個(gè)元素連結(jié)到上的對(duì)象。 功能 數(shù)據(jù)綁定 AngularJS的雙向數(shù)據(jù)綁定，一方面可以做到model變化驅(qū)動(dòng)了DOM中元素變化，另一方面也可以做到DOM元素的變化也會(huì)影響到Model。 ...
閱讀 735·2023-04-25 19:43
閱讀 3981·2021-11-30 14:52
閱讀 3807·2021-11-30 14:52
閱讀 3871·2021-11-29 11:00
閱讀 3802·2021-11-29 11:00
閱讀 3904·2021-11-29 11:00
閱讀 3580·2021-11-29 11:00
閱讀 6182·2021-11-29 11:00
