Div 它是一个 html 标签,一个块级元素(单独显示一行)。它单独使用没有任何意义,必须结合 CSS 来使用。它主要用于页面的布局。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>div效果演示</title> <style> div{ border: 1px solid red; 400px; height: 200px; } </style> </head> <body> <div id=""> 传智播客 </div> 传智博客AAA </body> </html>
Span 它是一个 html 标签,一个内联元素(显示一行)。它单独使用没有任何意义,必须结合 CSS 来使用。它主要用于对括起来的内容进行样式的修饰。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>span演示</title> <style> span{ font-size: 30px; } </style> </head> <body> <span> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的! </span> AAAAA </body> </html>
CSS概述:
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
CSS 的作用?
HTML:它是整个网站的骨架。
CSS:它是对整个网站骨架的内容进行美化(修饰)
CSS 如何使用?
语法和规范
选择器{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
style:设置样式
color:颜色
font-size:字体大小
pink:粉红色
gold:金黄色
gray:灰色
blue:蓝色
red:红色
yellow:黄色
black:黑色
white:白色
background-color:背景颜色
元素选择器(全部)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素选择器</title> <style> div{ font-size: 30px; color: pink; } </style> </head> <body> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!11 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!22 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!33 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!44 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!55 </div> </body> </html>
类选择器(部分)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>类选择器</title> <style> .div2{ font-size: 30px; color: gold; } </style> </head> <body> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!11 </div> <div class="div2"> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!22 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!33 </div> <div class="div2"> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!44 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!55 </div> </body> </html>
id选择器(一个)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>id选择器</title> <style> #div5{ font-size: 30px; color: yellow; } </style> </head> <body> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!11 </div> <div class="div2"> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!22 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!33 </div> <div class="div2"> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!44 </div> <div id="div5"> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!55 </div> </body> </html>
层级选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层级选择器</title> <style> div p{ font-size: 30px; color: green; } </style> </head> <body> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!11 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!22 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!33 </div> <div> <p> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!44 </p> </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!55 </div> <p> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!44 </p> </body> </html>
属性选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> input[type="text"]{ background-color: red; } input[type="password"]{ background-color: blue; } </style> </head> <body> 用户名:<input type="text" name="username" /><br /> 密码:<input type="password" name="password" /> </body> </html>
内部引入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内部引入</title> <style type="text/css"> div{ font-size: 30px; color: pink; } </style> </head> <body> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!11 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!22 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!33 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!44 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!55 </div> </body> </html>
行内引入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行内引入</title> <style type="text/css"> div{ font-size: 30px; color: pink; } </style> </head> <body> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!11 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!22 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!33 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!44 </div> <div style="font-size: 20px;color: blue;"> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!55 </div> </body> </html>
外部引入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>外部引入</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!11 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!22 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!33 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!44 </div> <div> 逗比是给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的!55 </div> </body> </html>
div{ font-size: 30px; color: pink; }
css浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css浮动</title> <style> #one{ border: 1px solid red; 300px; height: 150px; float: left; } #two{ border: 1px solid black; 300px; height: 150px; } #three{ border: 1px solid blue; 300px; height: 150px; } /*清除浮动*/ #clear{ clear: both; } </style> </head> <body> <div id="one"> </div> <div id="clear"> </div> <div id="two"> </div> <div id="three"> </div> </body> </html>
盒子模型:
border:边框
width:宽度
height:高度
margin:外边距
padding:内边距
float:浮动
clear:清除
none:无(元素不浮动)
left:左边
right:右边
both:都(同时)
display:显示方式
block:显示的(显示为块级元素)
inline:在一行(显示为内联元素)
div:块级元素的区域
span:内联元素的区域
element:元素
top:顶部
bottom:底部
product:产品,商品
header:头部信息
menu:菜单
show:显示
father:父亲
big:大的
small:小的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页</title> <style> #father{ border: 1px solid red; 1300px; height: 2170px; margin: auto; } /*#logo{ border: 1px solid black; 1300px; height: 50px; }*/ .top{ border: 1px solid blue; 431px; height: 50px; float: left; } #top{ padding-top: 12px; height: 38px; } #menu{ border: 1px solid red; 1300px; height: 50px; background-color: black; } ul li{ display: inline; color: white; } #clear{ clear: both; } #product{ border: 1px solid red; 1300px; height: 558px; } #product_top{ border: 1px solid blue; 100%; height: 45px; padding-top: 8px; } #product_bottom{ border: 1px solid green; 100%; height: 500px; } #product_bottom_left{ border: 1px solid red; 200px; height: 500px; float: left; } #product_bottom_right{ border: 1px solid blue; 1094px; height: 500px; float: left; } #big{ border: 1px solid red; 544px; height: 248px; float: left; } #small{ border: 1px solid blue; 180px; height: 248px; float: left; /*让里面的内容居中*/ text-align: center; } #bottom{ text-align: center; } a{ text-decoration: none; } </style> </head> <body> <div id="father"> <!--1.logo部分--> <div id="logo"> <div class="top"> <img src="../img/logo2.png" height="46px" /> </div> <div class="top"> <img src="../img/header.png" height="46px" /> </div> <div class="top" id="top"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> <div id="clear"> </div> <!--2.导航栏部分--> <div id="menu"> <ul> <a href="#"><li style="font-size: 20px;">首页</li></a> <a href="#"><li>手机数码</li></a> <a href="#"><li>家用电器</li></a> <a href="#"><li>鞋靴箱包</li></a> <a href="#"><li>孕婴保健</li></a> <a href="#"><li>奢侈品</li></a> </ul> </div> <!--3.轮播图部分--> <div id=""> <img src="../img/1.jpg" width="100%" /> </div> <!--4.最新商品--> <div id="product"> <div id="product_top"> <span style="font-size: 25px;padding-top: 8px;">最新商品</span> <img src="../img/title2.jpg" /> </div> <div id="product_bottom"> <div id="product_bottom_left"> <img src="../img/big01.jpg" width="100%" height="100%" /> </div> <div id="product_bottom_right"> <div id="big"> <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> </div> </div> </div> <!--5.广告图片--> <div id=""> <img src="../img/ad.jpg" width="100%" /> </div> <!--6.热门商品--> <div id="product"> <div id="product_top"> <span style="font-size: 25px;padding-top: 8px;">最新商品</span> <img src="../img/title2.jpg" /> </div> <div id="product_bottom"> <div id="product_bottom_left"> <img src="../img/big01.jpg" width="100%" height="100%" /> </div> <div id="product_bottom_right"> <div id="big"> <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%" /></a> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> <div id="small"> <img src="../img/small03.jpg" /> <a href="#"><p style="color: gray;">电炖锅</p></a> <p style="color: red;">¥399.00</p> </div> </div> </div> </div> <!--7.广告图片--> <div id=""> <img src="../img/footer.jpg" width="100%" /> </div> <!--8.友情链接和版权信息--> <div id="bottom"> <a href="#">1234</a> <a href="#">2234</a> <a href="#">3234</a> <a href="#">4234</a> <a href="#">5234</a> <a href="#">6234</a> <a href="#">7234</a> <a href="#">8234</a> <p> 123456789 </p> </div> </div> </body> </html>