前端学习:学习笔记(CSS部分)
前端学习:学习笔记(CSS部分)
CSS的引入方式和书写规范
CSS的插入方式_内嵌样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 插入CSS代码的第1种方式: 内嵌形式 --> <div style="height: 300px;width: 300px;background-color: red;"> <h1>我是DIV--1号</h1> </div> <div> <h1>我是DIV--2号</h1> </div> </body> </html>
CSS的插入方式_内部样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ height: 300px; width: 300px; background-color: red; color: yellow; } </style> </head> <body> <!-- 插入CSS代码的第2种方式: 内部形式 --> <div> <h1>我是DIV--1号</h1> </div> <div> <h1>我是DIV--2号</h1> </div> </body> </html>
CSS的插入方式_外部样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/Demo1.css" /> </head> <body> <!-- 插入CSS代码的第3种方式: 外部形式 --> <div> <h1>我是DIV--1号</h1> </div> <div> <h1>我是DIV--2号</h1> </div> </body> </html>
Demo01.css
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
div{ height: 500px; width: 500px; background-color: #FFFF00; color: black; }
CSS选择器
CSS标签选择器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="utf-8" /> <title></title> <!-- 选择器的作用: 根据我们的项目需要,找到我们需要找到的某一些标签 选择器{ 属性:属性值; ==>键值对 属性:属性值; 属性:属性值; 属性:属性值; } --> <style> div{ height: 300px; width: 300px; background-color: red; } </style> </head> <body> <div><h1>DIV1</h1></div> <div><h1>DIV2</h1></div> <div><h1>DIV3</h1></div> <div><h1>DIV4</h1></div> <div><h1>DIV5</h1></div> </body>
CSSid选择器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> #d1{ height: 400px; width: 400px; background-color: blue; color: red; } </style> </head> <body> <div id="d1"><h1>DIV1</h1></div> <div><h1>DIV2</h1></div> <div><h1>DIV3</h1></div> <div><h1>DIV4</h1></div> <div><h1>DIV5</h1></div> </body>
CSS类选择器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> .clazz{ height: 300px; width: 300px; background-color: red; } </style> </head> <body> <div class='clazz'><h1>DIV1</h1></div> <div class='clazz'><h1>DIV2</h1></div> <div class='clazz'><h1>DIV3</h1></div> <div><h1>DIV4</h1></div> <div><h1>DIV5</h1></div> </body>
同时使用多个选择器的情况
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> div{ height: 300px; width: 300px; background-color: black; } .clazz{ background-color: yellow; } #d1{ background-color: red; } </style> </head> <body> <div id="d1" class="clazz"><h1>DIV1</h1></div> <div><h1>DIV2</h1></div> <div><h1>DIV3</h1></div> <div><h1>DIV4</h1></div> <div><h1>DIV5</h1></div> </body>
同时使用三种方式插入CSS代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> div{ height: 200px; width: 200px; background-color: blue; } </style> <link rel="stylesheet" href="css/Demo05.css" /> </head> <body> <div style="height: 100px;width: 100px;background-color: red;"><h1>DIV1</h1></div> </body>
同时使用三种方式插入CSS代码.css
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
div{ height: 300px; width: 300px; background-color: yellowgreen; }
属性选择器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> div{ height: 300px; width: 300px; background-color: red; margin-bottom: 10px; color: red; } div[align="left"]{ background-color: yellow; } div[align="right"]{ background-color: blue; } </style> </head> <body> <div align="left">DIV1</div> <div align="left">DIV2</div> <div align="right">DIV3</div> <div align="right">DIV4</div> <div align="right">DIV5</div> </body>
伪元素选择器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> a{ text-decoration: none; } a:link{ color: yellowgreen; } a:hover{ color: black; text-decoration: underline; } a:active{ color: darkgray; } a:visited{ color: darkblue; } </style> </head> <body> <h1> <a href="#1">百度一下</a><br> <a href="#1">百度一下</a><br> <a href="#1">百度一下</a><br> <a href="#1">百度一下</a><br> <a href="#1">百度一下</a><br> <a href="http://www.baidu.com">百度一下</a><br> </h1> </body>
层级选择器
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> #d1 a{ color: red; } </style> </head> <body> <div id='d1'> <a>百度一下</a> <a>百度一下</a> <a>百度一下</a> <a>百度一下</a> </div> <a>百度一下</a> </body>
CSS属性
CSS中的文本属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> body{ background-color: yellowgreen; font-family: "微软雅黑"; font-size: 50px; color: red; text-decoration: none; text-align: right; font-weight: bold; line-height: 120px; } span{ color: black; } </style> </head> <body> HTML是世界上最好的编程语言.<br> <span> HTML是世界上最好的编程语言.<br> HTML是世界上最好的编程语言.<br> <span> </body>
CSS中的背景属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> body{ background-color: red; background-image: url(img/tphot.jpg); background-repeat: repeat-y; } </style> </head> <body> </body>
CSS中的列表属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> ul li{ list-style-type:none; list-style-image:url(img/tphot11.jpg); } </style> </head> <body> <ul> <li>第1名</li> <li>第2名</li> <li>第3名</li> <li>第4名</li> </ul> </body>
CSS中的显示属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> div{ height: 300px; width: 300px; background-color: red; display: inline; } ul li{ list-style-type: none; display: inline; } span{ height: 300px; width: 300px; background-color: salmon; /*display: block;*/ } </style> </head> <body> <input type="text" /> <div> DIV </div> HTML <ul> <li>第1名</li> <li>第2名</li> <li>第3名</li> <li>第4名</li> </ul> <span> 我是一个块级标签 </span> xxxxxx </body>
CSS中的浮动属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> div{ font-size: 30px; font-weight: 900; color: rosybrown; } #d1{ height: 300px; width: 300px; background-color: red; float: left; } #d2{ height: 300px; width: 300px; background-color: yellowgreen; float: left; } #d3{ height: 300px; width: 300px; background-color: black; float: right; } .clear{ clear: both; } </style> </head> <body> <div id="d1">DIV1</div> <div id="d2">DIV2</div> <div id="d3">DIV3</div> <div class="clear"></div> </body>
练习:注册页面
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #header{ height: 100px; width: 100%; } #content{ height: 700px; width: 60%; /*设置页面居中*/ margin: auto; border: 2px solid black; } .c1{ height: 30px; width: 100%; background-color: #F7F7F7; } .c2{ height: 200px; width: 100%; background-color: white; } #c2-left{ height: 100%; width: 30%; float: left; text-align: right; } #c2-left div{ height: 20%; } #c2-right{ margin-left: 20px; height: 100%; width: 60%; float: left; } #c2-right div{ height: 20%; } .clear{ clear: both; } .c6{ height: 120px; width: 100%; background-color: white; } #c6-zhuce { height: 40px; width: 250px; background-color: red; text-align:center; margin: auto; } #c6-zhucezi{ padding: 8px; } span{ color: red; } </style> </head> <body> <div id="header"></div> <div id="content"> <div class="c1"><strong><font> 账户信息</font></strong></div> <div class="c2"> <div id="c2-left"> <div></div> <div><span>*</span>用户名:</div> <div><span>*</span>请输入密码:</div> <div><span>*</span>请确认密码:</div> </div> <div id="c2-right"> <div></div> <div><input type="text"/></div> <div><input type="password"/></div> <div><input type="password"/></div> </div> <div class="clear"></div> </div> <div class="c1"><strong><font> 联系人信息</font></strong></div> <div class="c2"> <div id="c2-left"> <div></div> <div><span>*</span>联系人姓名:</div> <div><span>*</span>所在部门:</div> <div><span>*</span>固定电话:</div> </div> <div id="c2-right"> <div></div> <div><input type="text"/></div> <div> <select> <option selected="selected">请选择</option> <option value="yjb">研究部</option> <option value="xzb">行政部</option> <option>人事部</option> <option>市场部</option> </select> </div> <div><input type="text"/></div> </div> <div class="clear"></div> </div> <div class="c1"><strong><font> 公司信息</font></strong></div> <div class="c6"> <div id="c2-left"> <div></div> <div><span>*</span>公司名称:</div> <div><span>*</span>购买类型/用途:</div> </div> <div id="c2-right"> <div></div> <div><input type="text"/></div> <div> IT设备<input type="checkbox" /> IT设备<input type="checkbox" /> IT设备<input type="checkbox" /> IT设备<input type="checkbox" /> IT设备<input type="checkbox" /> IT设备<input type="checkbox" checked="checked"/> </div> </div> <div class="clear"></div> </div> <div id="c6-zhuce"> <div id="c6-zhucezi"> <font color="white">立即注册 </font> </div> </div> </div> </body> </html>
CSS盒子模型
盒子模型
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> #box{ height: 300px; width: 300px; background-color: darkgreen; /*上下左右*/ padding: 50px; /*上 左右 下*/ /*padding: 50px 100px 150px;*/ /*padding: 50px 100px 150px 200px;*/ border: 5px solid red; } #moon{ height: 300px; width: 300px; background-color: yellow; } #d1{ height: 300px; width: 300px; border: 5px dashed black; } #d2{ height: 300px; width: 300px; border: 5px dotted black; } div{ margin-left: 50px; margin-bottom: 100px; } </style> </head> <body> <div id="box"> <div id="moon"></div> </div> <div id="d1"></div> <div id="d2"></div> </body>
圆角边框
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> #d1{ width: 300px; height: 300px; border: 5px solid red; margin: auto; margin-top: 100px; /*border-radius: 50px;*/ /*border-radius: 50px 100px 150px;*/ } #d2{ width: 300px; height: 300px; border: 5px solid blue; border-radius: 150px; } #d3{ width: 300px; height: 150px; border: 5px solid blue; border-radius: 300px 300px 0px 0px; } #d4{ width: 300px; height: 150px; border: 5px solid greenyellow; border-radius: 0px 0px 300px 300px; } #d5{ width: 150px; height: 300px; border: 5px solid greenyellow; border-radius: 300px 0px 0px 300px; } #d6{ width: 150px; height: 300px; border: 5px solid greenyellow; border-radius: 0px 300px 300px 0px; } #d7{ width: 150px; height: 150px; border: 5px solid greenyellow; border-radius: 150px 0px 0px 0px; } #d8{ width: 150px; height: 150px; border: 5px solid greenyellow; border-radius: 0px 150px 0px 0px; } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> <div id="d4"></div> <div id="d5"></div> <div id="d6"></div> <div id="d7"></div> <div id="d8"></div> </body>
盒子阴影
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> div{ height: 500px; width: 500px; background-color: salmon; box-shadow: 0px 0px 30px yellowgreen; } </style> </head> <body> <div></div> </body>
CSS 的定位
相对定位
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> #d1{ height: 300px; width: 300px; background-color: greenyellow; margin-top: 20px; /*设置相对定位*/ position: relative; left: 150px; /*right: 100px;*/ float: left; /*top: 50px;*/ bottom: 100px; } #d2{ height: 300px; width: 300px; background-color: cornflowerblue; margin-top: 20px; float: left; } </style> </head> <body> <div id="d1"> </div> <div id="d2"> </div> </body>
绝对定位
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> div{ height: 300px; width: 300px; margin-top: 20px; float: left; } #d1{ background-color: greenyellow; } #d2{ background-color: yellow; /*设置成绝对定位*/ position: absolute; left: 100px; top: 500px; } #d3{ background-color: red; } </style> </head> <body> <div id="d1"> </div> <div id="d2"> </div> <div id="d3"> </div> </body>
固定定位
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> body{ height: 5000px; } div{ height: 100px; width: 80%; background-color: greenyellow; /*设置成固定定位*/ position: fixed; top:300px; } </style> </head> <body> <div id="d1">我是一个广告~~~~~~~~~~~~~</div> </body>
z-index属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> #d1{ height: 300px; width: 300px; background-color: red; float: left; position: relative; z-index: 10; } #d2{ height: 300px; width: 300px; background-color: blue; float: left; margin-left: -200px; margin-top: 50px; z-index: 5; position: relative; } #d3{ height: 300px; width: 300px; background-color: yellowgreen; float: left; margin-left: -200px; margin-top: 100px; z-index: 1; position: relative; } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> </body>
设置元素透明度
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<head> <meta charset="UTF-8"> <title></title> <style> div{ height: 300px; width: 300px; background-color: blue; opacity: 0.1; } </style> </head> <body> <div> DIV </div> </body>
愿路途漫长,以后莫失莫忘。 愿你不骄不躁,安稳顺心。
作者:菜鸟-传奇
本文版权归作者和博客园共有,重在学习交流,不以任何盈利为目的,欢迎转载。
敲敲小黑板:《刑法》第二百八十五条 【非法侵入计算机信息系统罪;非法获取计算机信息系统数据、非法控制计算机信息系统罪】违反国家规定,侵入国家事务、国防建设、尖端科学技术领域的计算机信息系统的,处三年以下有期徒刑或者拘役。违反国家规定,侵入前款规定以外的计算机信息系统或者采用其他技术手段,获取该计算机信息系统中存储、处理或者传输的数据,或者对该计算机信息系统实施非法控制,情节严重的,处三年以下有期徒刑或者拘役,并处或者单处罚金;情节特别严重的,处三年以上七年以下有期徒刑,并处罚金。