當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

冬季小学期 NIIT公司 web前端培训 CSS

發(fā)布時間：2023/12/10 HTML 42 豆豆

生活随笔收集整理的這篇文章主要介紹了冬季小学期 NIIT公司 web前端培训 CSS 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

外邊距合并?http://www.w3school.com.cn/css/css_margin_collapsing.asp

div、p、h1 塊元素 span行元素

浮動：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

http://www.w3school.com.cn/css/css_positioning_floating.asp

css模塊化思想（一）--------命名是個技術活?http://www.cnblogs.com/WebShare-hilda/p/4686067.html

這樣的命名注視、注釋應該是正規(guī)公司上會用到的。

?編碼規(guī)范 ?http://codeguide.bootcss.com/ ??編寫靈活、穩(wěn)定、高質量的 HTML 和 CSS 代碼的規(guī)范。

<!DOCTYPE html> <html> <head><title>title Web tutorials on HTML, CSS</title><meta name="description" content="Web tutorials on HTML, CSS,javascript" /><link rel="stylesheet" href="xx.css" type="text/css"><style type="text/css">/*css語法：選擇器{屬性名1:屬性值1;屬性名2：屬性2,屬性2; }*/body{font-family: 微軟雅黑;font-size: 14px;}#container{width: 900px;/*margin: 0 auto;*/}#header{height: 100px;background-color: blue;}#menu{height:30px ;background-color: yellow;margin-top: 5px;}#content{height: 500px;margin-top: 5px;}#left{width: 28%;height: inherit;background-color: pink;float: left;}#position{position: relative;/*相對*/position: static;/*正常*/}#mid{width: 40%;height: inherit;background-color: purple;float: left;margin-left: 2%; }#right{width: 28%;height: inherit;background-color: cyan;float: left;margin-left: 2%; }#footer{height: 100px;margin-top: 5px;background-color: green;}table{border:2px solid green ;/*雙線條邊框 double 定義雙線。*/border-collapse: collapse;/*變單線條邊框*//*border-spacing:10px 10px;/*單元格邊框的距離。*/*/font-family:Arial;width: 100%;}th,td{font-size:1em;border: 1px solid #98bf21;padding: 3px 7px 2px 7px; }th{font-size: 1.1em;text-align: left;;padding-top: 5px;padding-bottom: 4px;background-color: #A7c942;color: #FFFFFF;}/*派生選擇器（組合選擇器）*/tr.alt td{color: #0000000;background-color: #EAF2D3;}/*元素選擇器*/p {text-indent: 5em;/*首行縮進5em*/text-align: center;/*居中*/word-spacing: 30px;/*詞間距*/letter-spacing: 20px;/*字母間距*/text-transform: capitalize;/*單詞首字母大寫*/text-decoration: underline;/*文本裝飾效果具有下劃線*/line-height: 10px;/*行間距*/}/*所有連接空白符合并為一個空格*//*id選擇器 id 屬性只能在每個 HTML 文檔中出現一次*/#outer{width: 300px;height: 300px;border: 1px solid #f00;margin: auto;/*上開始順時針 auto居中*/margin: 30px 50px;/*上下，左右兩個值*/background-color:black; }#inner{width: 150px;height: 150ps;border: 5px solid white;padding: 10px;background-color: purple;}div#test {background-color: #99bbbb;/*背景顏色*/background-image: url(test.jpg);/*背景圖片 url()*/background-repeat: repeat-y;/*圖片垂直重復 no-repeat repeat-x repeat-y repeat*/background-position: center;/*常用位置關系 left center right top bottom 可以復合使用一般先水平后垂直*/background-position: 30% 70%;/*單位為百分比*/background-position: 50px 100px;/*單位為像素*/background-attachment:fixed;/*相對于可視區(qū)是固定的*/background-size: cover;/*CSS3 圖片適應邊框*/background: url(test.jpg) 0 0 no-repeat;/*空格空開對應的值*/}/*類選擇器*/.class1 {font-family: Georgia,serif;/*首選Georgia，沒有則選擇serif字體*/style="font-family: Times,'New York'; font-style: italic;font-weight: bold;/*字體粗體 italic斜體*/font-weight: 900;"/*100~900級別的加粗度 */font-size: 14px;/*設置字體大小像素*/font-size: 0.87em;/*1em等于當前字體尺寸瀏覽器默認的文本大小16px*/}ul{width: 240px;height: 259px;background: url('images/menu-bg.jpg') 0 0 no-repeat;font-size: 13px;font-weight: bold;padding: 40px 0 0 50px;}ul li{background: url('images/homebg.gif') 0 0 no-repeat;padding: 0 0 0 25px;line-height: 28px;}ul li a:hover{color: cyan;}/*屬性選擇器*/[title=list]{list-style-type:none;/*列表前面沒有點*//*list-style-image: url('images/arrow-normal.gif');選擇列表前面的圖標*/}.class2 {a:link {color:#FF0000;} /* 未被訪問的鏈接 */a:visited {color:#00FF00;} /* 已被訪問的鏈接 */a:hover {color:#FF00FF;} /* 鼠標指針移動到鏈接上 */a:active {color:#0000FF;/* 正在被點擊的鏈接 */} /*a:hover 必須位于 a:link 和 a:visited 之后a:active 必須位于 a:hover 之后*/</style> </head> <body> <table><tr><th>學號</th><th>姓名</th></tr><tr><td>27</td><td>bao</td></tr><tr class="alt"><td>09</td><td>duan</td></tr><tr><td>32</td><td>junjie</td></tr><tr class="alt"><td>31</td><td>zhi</td></tr> </table><div id="outer"><div id="inner">inner</div> </div>  <div id="container"><div id="header">header</div><div id="menu">menu</div><div id="content"><div id="left">leftpanle</div><div id="mid">middlepanle</div><div id="right">rightpanle</div></div><div id="footer">footer</div> </div><ul title="list"><li ><a href="#" >home</a></li><li><a href="#">about us</a></li><li><a href="#">network</a></li><li><a href="#">submission</a></li><li><a href="#">archives</a></li> </ul></body> </html>

White

純白

#FFFFFF

255,255,255

Black

純黑

#000000

0,0,0

Yellow

純黃

#FFFF00

255,255,0

Cyan

青色

#00FFFF

0,255,255

Magenta

洋紅

#FF00FF

255,0,255

在學習CSS ??http://www.w3school.com.cn/css/css_selector_descendant.asp

margin:top right bottom left?

轉載于:https://www.cnblogs.com/linkarl/p/5144101.html

總結

以上是生活随笔為你收集整理的冬季小学期 NIIT公司 web前端培训 CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SVPWM
下一篇： angular 加入原生html,Ang