span标签:重点要突出的字,使用span套起来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #titel{ font-size: 50px; } </style> </head> <body> 欢迎学习<span id="titel">java</span> </body> </html>
---------------------------------------------------------
字体样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- font-family:字体 font-size:字体大小 font-weight字体的粗细 color:字体颜色 --> <style> body{ font-family:"Lucida Fax",楷体; color: #bd1d1d; } h1{ font-size: 50em; } .p1{ font-weight: bold; } </style> </head> <body> <h1>元泱境界</h1> <p class="p1"> 包含平行的天地两界。魁拔前72年两界首次接触。天界 [2]更为文明,时间流速慢于地界。其居民自称天神,行事遵从理性思维。天神分为镜、朴、泱、焰、尘五系(对应五行,每系有一位主神)和至高神“元”。“元点”是天界的能量核心。 地界已知有十一国,分别为神圣树国(辉妖)、风国(基斯卡人)、龙国(龙族)、商国(默拓人)、兽国(兽族)、翼国(翼族)、雪国(萨库人)、夜国(雾妖)、海国(粼妖)、沙国(格洛莫赫人)和虫国(蛰族),前十国共同组成神圣联盟。 </p > <p> 脉是一种振动,是万物的组成。人体有十二脉门,通过脉门引动空气中的脉可以形成脉术。 曲境是平行空间间的通道。纹耀则是曲境的碎片,多种多样,既代表持有者社会地位,又可在其使用脉术时增幅力量。 </p> <p> I offer you the loyalty of a man who has never been loyal. I offer you explanations of yourself, theories about yourself, authentic and surprising news of yourself. I can give you my loneliness, my darkness, the hunger of my heart. I am trying to bribe you with uncertainty, with danger, with defeat. </p> </body> </html>
--------------------------------------------------------
文本样式
1.颜色 color rgb rgba
2.文本对齐方式 text-align=center
3.首行缩进 text indent:2em
4.行高 lin -height :单行文字上下居中! lin-height=height
5.装饰 text decoration:
6.文本图片水平对齐:vertical-align:middle
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 颜色: 单词 RGB 0-F RGBA A:0-1 text-align:排版居中 text-indent:段落首行缩进 行高,和块的高度一致,就可以上下居中 height: 300px; line-height: 300px --> <style> h1{ color: rgb(0,255,255,0.9); text-align: center; } .p1{ text-indent: 2em; } .p3{ background: #5832de; height: 300px; line-height: 300px; } .L1{ /*下线 */ text-decoration: underline; } .L2{ /* 中线*/ text-decoration:line-through ; } .L3{ /*上线*/ text-decoration: overline; } </style> </head> <body> <p class="L1">1122333</p> <p class="L2">1122333</p> <p class="L3">1122333</p> <h1>故事介绍</h1> <p class="p1"> 是一种振动,是万物的组成。人体有十二脉门,通过脉门引动空气中的脉可以形成脉术。 </p> <p> 曲境是平行空间间的通道。纹耀则是曲境的碎片,多种多样,既代表持有者社会地位,又可在其使用脉术时增 </p> <p class="p3"> I offer you the loyalty of a man who has never been loyal. </p> </body> </html>
---------------------------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 颜色: 单词 RGB 0-F RGBA A:0-1 text-align:排版居中 text-indent:段落首行缩进 行高,和块的高度一致,就可以上下居中 height: 300px; line-height: 300px --> <style> h1{ color: rgb(0,255,255,0.9); text-align: center; } .p1{ text-indent: 2em; } .p3{ background: #5832de; height: 300px; line-height: 300px; } .L1{ /*下线 */ text-decoration: underline; } .L2{ /* 中线*/ text-decoration:line-through ; } .L3{ /*上线*/ text-decoration: overline; } </style> </head> <body> <p class="L1">1122333</p> <p class="L2">1122333</p> <p class="L3">1122333</p> <h1>故事介绍</h1> <p class="p1"> 是一种振动,是万物的组成。人体有十二脉门,通过脉门引动空气中的脉可以形成脉术。 </p> <p> 曲境是平行空间间的通道。纹耀则是曲境的碎片,多种多样,既代表持有者社会地位,又可在其使用脉术时增 </p> <p class="p3"> I offer you the loyalty of a man who has never been loyal. </p> </body> </html>
-------------------------------------------------
阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{ /*默认的颜色*/ text-decoration: none; color: #000; } /*鼠标悬浮的状态*/ a:hover{ color: orange; font-size: 50px; } /*鼠标按住未释放*/ a:active{ color:#5fce5b; } #price{ text-shadow:#5fce5b 10px 0px 2px; } </style> </head> <body> <a href="#"> <img src="images/4.jpeg" alt=""> </a> <p> <a href="">码出搞效:java开发手册</a> </p> <p> <a href=""> 作者:古今</a> </p> <p id="price"> ¥99 </p> </body> </html>
-------------------------------------
列表
#nav{ width: 200px; background:darkgrey ; } .title{ font-size: 18px; font-weight: bold; text-indent: 1em; line-height: 30px; background: #bd1d1d; } /* ul li none去掉圆点 circle 空心圆 decimal有序列表 */ /*ul{*/ /* background:darkgrey ;*/ /*}*/ ul li{ height:30px ; list-style:none; text-indent:1em ; } a{ text-decoration: none; font-size: 14px; color: black; } a:hover{ color: orange; text-decoration: underline; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="css/style.css" rel="stylesheet"type="text/css"> </head> <body> <div id="nav"> <h2 class="title">全部商品分类</h2> <ul> <li> <a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a> </li> <li> <a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a> </li> <li> <a href="#">电脑</a> <a href="#">办公</a> </li> <li> <a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a> </li> <li> <a href="#">服饰鞋帽</a> <a href="#">个性化妆</a> </li> <li> <a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a> </li> <li> <a href="#">食品饮料</a> <a href="#">保健食品</a> </li> <li> <a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a> </li> </ul> </div> </body> </html>
---------------------------------------------------------
背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 1000px; height: 700px; border: 1px solid red; /*默认是全部平铺*/ background-image: url("images/4.jpeg"); } .div1{ background-repeat:repeat-x ; } .div2{ background-repeat:repeat-y ; } .div3{ background-repeat:no-repeat ; } </style> </head> <body> <div class="div1"></div> <div class="div2"> </div> <div class="div3"></div> </body> </html>
----------------------------------------------------------
渐变地址:推荐Grabient
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 径向渐变,圆形渐变 --> <style> body{ /*background-color: #0093E9;*/ background-image: linear-gradient(302deg, #0093E9 0%, #80D0C7 100%); } </style> </head> <body> 哈哈哈 </body> </html>
-----------------------------------------------------------------------
盒子模型
margin:外边距
padding:内边距
border:边框
边框
1.边框的粗细
2.边框的样式
3.边框的颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*总有一个默认的外边距margin=0*/ body{ margin: 0; padding: 0; text-decoration: none; } /*粗细 ,样式,颜色*/ #box{ width: 300px; border: 1px solid red; } h2{ font-size: 16px; background-color:blue ; line-height:30px ; margin: 0; color: white; } form{ background: #5fce5b; } div:nth-of-type(1) input{ border: 3px solid black; } div:nth-of-type(2) input{ border: 3px solid powderblue; } div:nth-of-type(3) input{ border: 3px solid green; } </style> </head> <body> <div id="box"> <h2>会员登录</h2> <form action="#"> <div> <span>用户名:</span> <input type="text"> </div> <div> <span>密码:</span> <input type="text"> </div> <div> <span>邮箱:</span> <input type="text"> </div> </form> </div> </body> </html>
-----------------------------------------------------------
盒子大小
margin+border+padding+内容宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外边距的妙用:居中.
margin: 0 auto;-->
<style>
/*粗细 ,样式,颜色*/
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
h2{
font-size: 16px;
background-color:blue ;
line-height:30px ;
margin: 0 1px;
color: white;
}
form{
background: #5fce5b;
}
form{
background: #5fce5b;
}
div:nth-of-type(1){
padding: 10px 2px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
-------------------------------------------------------------
圆角边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; height: 100px; border: 10px solid red; /*左上 右上 右下 左下*/ border-radius: 10px; } </style> </head> <body> <div></div> </body> </html>
-------------------------------------------------------
盒子阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 居中要求:块元素,块元素有固定的宽度 margin--> <style> img{ border-radius: 50px; box-shadow:10px 10px 100px yellow ; } </style> </head> <body> <div style="width: 500px;display:block;text-align: center;"> <img src="images/4.jpeg" alt=""> </div> </body> </html>
----------------------------------------------------------
copy网站推荐:源码之家,模版之家,飞冰,门户网站模版之家
登录系统,
做网页不要造轮子,要用轮子,用前人已经造好的,不要从零开始
成为copy大师 p16
----------------------------------------------------------------------------
浮动
标准文档流
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- block 块元素 inline 行内元素 inline-block 是块元素,但是可以内联,在一行 noone --> <style>div{ width: 100px; height: 100px; border: 1px solid red; display:none; }span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; } </style> </head> <body> <div>div块内元素</div> <span>span行内元素</span> </body> </html>
-----------------------------------------------
父级边框塌陷的问题
clear:right;右侧不允许有浮动元素
clear:left;左侧不允许有浮动元素
clear:both;两侧不允许有浮动元素
clear:none;不运行浮动
解决方案:
1.增加父级元素的高度
#father{
border:1px # 000 solid;
height:800px
}
2.增加一个空的div标签,清除浮动
<div class ="clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}.
3.overflow
在父类中增加一个 overflow:hidden
4.父类添加一个伪类 :after
#father:after{
content:'';
display:block;
clear:both
}
总结面试题:小结 (必考题)
1.浮动元素后面增加空div
简单,代码中尽量避免空的div
2.设置父元素的高度
简单,元素假设有固定的高度,就会被限制
3.overflow
简单,下拉的一些场景避免使用
4.父类添加一个伪类:after(推荐)
写法稍微复杂一点,但是没有副作用,推荐使用
对比:
display:方向不可以控制
float:浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷问题