豚鼠学习html第四周
一.
1.relative 相对定位position定位
-right：100px与 -100px是等价的
-相对于素自身进行偏移
-实操效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{background: red; width:100px ;height:100px;}
.div2{background: green ;width:100px ;height:100px ;position: relative;right:-100px;bottom:100px;}
.div3{background: yellow;width:100px ;height:100px;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
2.absolute绝对定位
-跑到可视地区
-祖先元素拥有relative position fixed其中一种即可以使其偏移
-实操效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{background: red;width: 100px; height: 100px;position: relative;}
.div2{background: yellow;width: 20px;height: 20px;position: absolute;right:0px;top:0px;}
</style>
</head>
<body>
<div class="div1"><div class="div2"></div> </div>
</div>
</body>
</html>
3.fixed sticky和zlndex
-固定广告，返回顶部，弹窗什么的
-单加sticky 没有意义，设置位置才有意义
- 可以写负数
- 用于脱离文档流的叠加效果
- 和同一级别比较
- 外层不写才和里面比较
- 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{border: 1px black solid; position: absolute;z-index: 0;}
.div2{ background: red; width:100px;height:100px;position: absolute;z-index: 2;}
.div3{background: aquamarine ;width:100px ;height:100px; position: absolute;z-index: 1;left: 50px; top: 50px;}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
<div class="div3"></div>
</body>
</html>
4.定位实现下拉菜单
-实操效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
div{width: 100px;height: 30px;margin: 20px auto; border: 1px black solid; position: relative;}
div ul {width: 100px;border: 1px black solid;position: absolute; left:-1px;top: 30px;display: none;}
div:hover ul{display: block;}
div ul li:hover{background: grey;}
p{text-align: center;}
</style>
</head>
<body>
<div>
下拉菜单
<ul>
这是一个cs
<li>2222</li>
<li>333</li>
<li>44</li>
<li>5 </li>
</ul>
<p>6666666666666666</p>
</div>
</body>
</html>
5.定位实现居中和装饰点
- 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding :0px;}
h2{color: white;}
a{color: rgb(162, 153,127);}
p{color: rgb(153, 153,137); }
.div0{background: rgb(22,2 , 26);height:280px;position: relative;}
.div1{width: 320px;height: 180px;background: url(./图片/YOUKU/PRW}ECE2{BH8HE9Z\(98}G1D.png) no-repeat; background-size: 205px 114px; padding-left: 76px;padding-right: 14px;position: absolute;left: 50px;}
.div2{width: 320px;height:180px;padding-right: 14px; position: absolute; left: 400px;}
.div3{width: 320px;height:180px;padding-right: 14px; position: absolute;left: 600px;}
.div4{width:320px;height: 180px;padding-right: 14px; position: absolute;left:800px;}
.div5{width: 320px;height: 180px;padding-right: 14px; position: absolute; left: 1000px;}
.div6{width: 320px;height: 180px;padding-right: 14px; position: absolute;left: 1200px;}
.div7{width: 210px;height: 117px;padding-right: 14px; position: absolute;left: 1400px; }
</style>
</head>
<body>
<div class="div0">
<h2 >正在热播</h2>
<a href="">网警说:2022年10月1三大网络诈骗典型案例</a>
<div class="div1"><a href="">网络暴力看你行不行</a><p>网络暴力看你行不行</p></div>
<div class="div2" ><a href="">我歌4神仙舞台</a><p>我歌4神仙舞台</p></div>
<div class="div3" ><a href="">那山那海热播</a><p>那山那海热播</p></div>
<div class="div4" ><a href="">盗墓笔记重启</a><p>盗墓笔记重启</p></div>
<div class="div5" ><a href="">执念如影,爽看全局</a><p>执念如影,爽看全局</p></div>
<div class="div6" ><a href="">海的尽头,人间大爱</a><p>海的尽头,人间大爱</p></div>
<div class="div7" ><a href="">岚,人间大爱</a><p> 岚,人间大爱</p>
</div>
</html>
- 懒得截图了，电脑缩放比不对
6.css添加省略号
- 实操效果
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{width: 50px;border: 1px black solid;white-space: nowrap;}
.div2{width: 50px;border: 1px black solid;white-space: nowrap;overflow: hidden;}
.div3{width: 50px;border: 1px black solid;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
</style>
</head>
<body>
<div class="div1">无无无无无无无无无无无无无无无无无无无</div>
<div class="div2">急急急急急急急急急急急急叽叽叽叽</div>
<div class="div3">奥嗷嗷哦嗷嗷嗷嗷哦嗷嗷嗷嗷嗷嗷</div>
</body>
</html>
7.css精灵及其好处
8.css圆角设置
- 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{width: 100px; height: 100px;background: red;border-radius: 50%;}
#div2{width: 100px; height: 100px;background: aqua;border-radius: 50% 50% 0 0;}
#div3{width: 100px; height: 50px; background: black; border-radius: 50px 50px 0 0;}
</style>
</head>
<body>
<div id="div1"> </div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
9. 博文尚美设计
-font-size使其等于0
- 实操效果
- css部分
*{margin: 0; padding: 0px;}
ul,ol{list-style:none;}
img{display: block;}
a{text-decoration:none; color:#646464}
h1,h2,h3{font-size:16px;}
body{font-family:Arial ;}
.l{float: left;}
.r{float: right;}
.clear:after{content: " ";display: block;clear:both}
.container{width: 1080px;margin: 0 auto;position:relative;}
.container_fluid{width: 100%;}
#head .head_logo{width:162px; height: 44px; margin-top:19px;}
#head .head_menu{font-size: 14px;line-height: 81px;}
#head .head_menu li{float: left; margin-left: 58px;}
.area_title{margin-top: 60px;text-align: center;}
.area_title h2{height: 20px;line-height:20px;font-size: 20px;color: #363636;background: url(./图片/练习图片/title_bg.png)no-repeat center 7px;}
.area_title p{color:#919191 ;line-height:34px;font-size:14px;}
#banner{position: relative;}
#banner .banner_list{width: 100%;height: 469px;position:relative;}
#banner .banner_list li{ border:absolute ;width: 100%; height: 100%; background: center 0 no-repeat; position: absolute;left: 0;top:0;z-index: 1;opacity: 0;}
#banner .banner_list li.active{opacity: 1;z-index:10 ;}
#banner .banner_list a{display: block;width: 100%;height: 100%;}
#banner .banner_btn{width: 100%;position: absolute;bottom: 19px;z-index: 20;font-size: 0;text-align: center;}
#banner .banner_btn li{display: inline-block;width: 12px;height: 12px;border: 2px solid white;border-radius: 50%;box-sizing: border-box;margin: 0 6px;cursor: pointer;}
#banner .banner_btn li.active{background: white;}
#service{overflow: hidden;min-height:407px;}
#service .service_list{text-align: center;margin-top:34px ;}
#service .service_list li{float:left ;width: 250px;margin: 0 10px;}
#service .service_list div{width: 102px;height: 102px;margin: 0 auto;}
#service .service_list li:nth-of-type(1) div{background: url(./图片/练习图片/web1.png);}
#service .service_list li:nth-of-type(2) div{background: url(./图片/练习图片/mail1.png);}
#service .service_list li:nth-of-type(3) div{background: url(./图片/练习图片/graphic1.png);}
#service .service_list li:nth-of-type(4) div{background: url(./图片/练习图片/e-bussiness1.png);}
#service .service_list p{font-size: 14px;color: #6D6D6D;line-height: 14px;}
#service .service_list h3{font-size: 18px;color: #434343;line-height: 36px;margin-top:23px ;}
#case{background: #f8f8f8;}
#case .container{min-height:460px;overflow: hidden;}
#case .case_title{margin-top: 55px;}
#case .case_title h2{color: #66C584;}
#case .case_list li{float: left;width: 340px;margin: 0 10px;}
#case .case_list {margin-top: 28px;}
#case .case_btn{background:#66C584;width: 176px;height: 37px;margin: 0 auto;border-radius: 13px;font-size: 14px;margin-top: 36px;text-align: center;line-height: 37px;}
#case .case_btn a{display:block;width:100%; height:100%;color: white;}
#news{min-height:450px;overflow: hidden;}
#new dl{margin-top: 48px;}
#news dd{width:846px}
#news dt{width :234px}
#news .area_title{margin-top: 65px;}
#news .news_list {width: 100%; }
#news .news_list li{width: 50%; float: left;margin-bottom: 48px;}
#news .news_date {width: 71px;height:70px ;border-right:1px solid #DCDCDC; text-align: center;}
#news .news_date i{color:#66C5B4;font-size: 39px;display: block;font-weight: bold;}
#news .news_date span{color: #999999;font-size: 20px;line-height: 36px;}
#news .news_text{width: 310px;margin-left: 20px; }
#news .news_text h3{font-size: 14px;}
#news .news_text h3 a{color:#3F3F3F}
#news .news_text p{font-size: 12px;color:#A4A4A4;line-height: 21px;margin-top: 17px;}
#foot{background: rgb(0, 126, 75);width: 100%;height:54px;}
#foot .container{font-size: 12px;line-height: 54px;}
#foot .container .l{color: white;}
#foot div{color:white;}
#foot div a{color:white;margin:0 19px}
#banner img{margin: 0 auto;}
- html部分
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./pc端企业类型整页制作.css">
</head>
<body>
<div id="head" class="container">
<div class="head_logo l" >
<a href=""><img src="./图片/练习图片/logo.png" alt="博文尚美"title="博文尚美"></a> </div>
<ul class="head_menu r">
<li >
<a href="">HOME</a>
</li>
<li>
<a href="">ABOUT</a>
</li>
<li>
<a href="">PROTFOLIO</a>
</li>
<li>
<a href="">SERVICE</a>
</li>
<li>
<a href="">NEWS</a>
</li>
<li>
<a href="">CONTACT</a>
</li>
</ul>
</div>
<div id="banner" class="container_fluid l">
<ul class="actvie banner_list ">
<li class="active" style="background-image:url(./图片/练习图片/banner.png)"><a href="#"></a></li>
<li style="background-image:url(./图片/练习图片/banner.png)"><a href="#"></a></li>
<li style="background-image:url(./图片/练习图片/banner.png)"><a href="#"></a></li>
<li style="background-image:url(./图片/练习图片/banner.png)"><a href="#"></a></li>
</ul>
<ol class="banner_btn">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<div id="service" class="container">
<div class="area_title">
<h2>服务范围</h2>
<p>OUR OVERSIVE</p>
</div>
<ul class="service_list">
<li>
<div></div>
<h3>WER DESING</h3>
<p>企业品牌网站设计/手机网站制作
<br> 动画网站创意设计
</p>
</li><li>
<div></div>
<h3>GRAPHIC DESIHN</h3>
<p>标志logo设计产品/产品宣传设计<br> 企业广告/海报设计</p>
</li><li>
<div></div>
<h3>E-BUSINES PLAN</h3>
<p>淘宝/天猫装修设计及运营推广/<br> 企业微博，微信营销</p></li><li>
<div></div>
<h3>MAILBOXAGEENTS</h3>
<p>腾讯/网易企业邮箱品牌代理<br> 个性化邮箱定制开放</p>
</li>
</ul>
</div>
<div id="case" class="container-fluid">
<div class="container">
<div class="area_title">
<h2>{客户案例}</h2>
<p>With the best professinoal teachnology,to design the best
innovtive web site
</p>
</div>
<ul class="case_list clear">
<li>
<a href=""><img src="./图片/练习图片/20141121095216750.png" alt="">
</a>
</li>
<li>
<a href=""><img src="./图片/练习图片/20141121095528549.png" alt="">
</a>
</li>
<li>
<a href=""><img src="./图片/练习图片/20141121105856226.png" alt="">
</a>
</li>
</ul>
<div class="case_btn"><a href="#">VIEW MORE</a></div>
</div>
</div>
<div class="container" id="news">
<div class="area_title">
<h2>最新咨询</h2>
<p>TEH LATEST NEWS</p>
</div>
<dl>
<dt class="l">
<img src="./图片/练习图片/xs1.png" alt="....">
</dt>
<dd class="l">
<ul class="news_list">
<li>
<div class="news_date l">
<i>09</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="">网站排名前三的技巧</a></h3>
<p>很多客户都会纳闷为什么之际的网站老是优化不到搜索引擎首页，更不用说首页进前三了，那么网站优...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>07</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="">网站排名前三的技巧</a></h3>
<p>很多客户都会纳闷为什么之际的网站老是优化不到搜索引擎首页，更不用说首页进前三了，那么网站优...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>06</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="">网站排名前三的技巧</a></h3>
<p>很多客户都会纳闷为什么之际的网站老是优化不到搜索引擎首页，更不用说首页进前三了，那么网站优...</p>
</div>
</li>
<li>
<div class="news_date l">
<i>05</i>
<span>Jan</span>
</div>
<div class="news_text l">
<h3><a href="">网站排名前三的技巧</a></h3>
<p>很多客户都会纳闷为什么之际的网站老是优化不到搜索引擎首页，更不用说首页进前三了，那么网站优...</p>
</div>
</li>
</ul>
</dd>
</dl>
</div>
<div id="foot" class="container-fluid ">
<div class="container">
<p class="l"> OPYRIGHT 2006-2014 Bowenshangmie Culture All Rigth Reserved</p>
<div class="r">
<a href="">HOME</a> |
<a href="">ABOUT</a> |
<a href="">PROFOLIO</a> |
<a href="">CONTACT</a>
</div>
</div>
</div>
</body>
10.游戏界面设计
- 实操效果
- css部分
*{margin: 0; padding: 0;}
ul,ol{list-style: none;}
img{display: block;}
a{text-decoration: none;color: #464646;}
h1,h2,h3{font-size: 16px;}
body{font-family: Arial,'宋体';}
.l{float: left;}
.r{float: right;}
.clear:after{content:" ";display: block;clear: both;}
.container{width: 1360px;margin: 0px auto;position: relative;}
.container_fluid{width: 100%;}
#head{width: 100%;height: 32px;border-bottom: rgb(225, 223, 223)1px solid;}
#head .czsh_1{font-size: 12px;}
#head .czsh_1 div{margin-top: 10px;}
#head .czsh_2 a{margin-left: 15px;}
#head .xuanzhe{padding-left: 20px;background: url(./图片/qqfc/00000.png)no-repeat ;}
#mian{background: url(./图片/qqfc/大背景图.jpg) no-repeat center 0;}
#nav{min-height: 77px; background:url(./图片/qqfc/xing.png) no-repeat center 0;overflow: hidden;position: relative}
#mian .main_logo{width:564px; height:120px;margin: 0 auto;margin-top:493px ;}
#nav dd a.hot:after{content: "";display: block;width: 15px;height: 15px;background: url(./图片/qqfc/hot.png)no-repeat;position: absolute;left:60px;top: 5px;}
#nav dd a.new:after{content: "";display: block;width: 15px;height: 15px;background: url(./图片/qqfc/new.png)no-repeat;position: absolute; left:60px;top: 5px;}
#nav dl{top:-380px;position: absolute;}
#nav .dl1{position: absolute;margin-left:221px;}
#nav .dl2{position: absolute;margin-left:419px;}
#nav .dl3{position: absolute;margin-left:591px;}
#nav .dl4{position: absolute;margin-left:765px;}
#nav .dl5{position: absolute;margin-left:942px;}
#nav .dl6{position: absolute;margin-left:1119px;}
#nav .dl7{position: absolute;margin-left:1292px;}
#nav dt{height: 105px; position: absolute;top:0;}
#nav dt a{width: 100%; height: 100%;display: block;text-indent:-9999px;overflow: hidden;position: relative;}
#nav dd{line-height: 27px;text-align: center;}
#nav dd a {color: white;font-size: 15px;display: block;position: relative;}
#nav .main_sy{width: 100px;}
#nav dd a:hover{color: red;text-decoration:underline;}
#banner .bannerlist{width: 840;height: 425px;overflow:hidden;}
#banner .bannerlist {width: 840px;position: relative;}
#banner .bannerlist li{width: 840;height: 425px;float: left;}
#banner .btnlist{ width:100%; height: 37px; background: rgba(0,0,0.5);border-bottom:1px #514b55 solid;position: absolute; bottom: 0;left: 0;}
#banner .btnlistul{text-align: center;position: absolute;margin-left: 370px;margin-top: 5px;}
#banner .btnlistul li{display:inline-block;width: 15px;height: 15px;background: url(./图片/qqfc/kwx.png)no-repeat;margin: 5px;cursor: pointer;}
#banner .btnlistul li.active{background: pink;}
#banner .btnzjt{width:12px;height: 22px; position: absolute;left: 0;top: 10px;;background:url(./图片/qqfc/z.png) no-repeat;}
#banner .btnyjt{width:12px;height: 22px; position: absolute;right: 0;top: 8px;;background:url(./图片/qqfc/r.png) no-repeat;}
- html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./游戏.css">
<style>
#text{width: 520px;height: 425px;}
#text .texttou{background: rgb(46, 58, 58)}
#text .texttou p{font-size: 20px;}
#text .texttou a{display: block; }
#text .textlist p{font-size: 20px;}
#text .textdi a{display: block;}
#text .textdi{font-size: 14px;color: rgb(158,192,230);}
</style>
</head>
<body>
<div class="container_fluid" id="head">
<div class="container">
<div >
<a href="" class="l"><img src="./图片/qqfc/5555.png" alt=""></a>
</div>
<div class="czsh_1 ">
<div class="czsh_2 r">
<a href="">腾讯游戏排行榜</a>
</div>
<div class="xuanzhe r">
<a href="">成长守护平台</a>
</div>
</div>
</div>
</div>
<div id="mian" class="container_fluid">
<div id="nav" class="container_fluid">
<div class="container">
<div class="main_logo">
<a href="" >
<img src="./图片/qqfc/cwdz.png" alt="qqfc">
</a>
</div>
<dl class="main_sy">
<dt>
<a href="">首页</a>
</dt>
</dl>
<dl class="dl1 ">
<dt></dt>
<dd> <a href="">飞车手游</a></dd>
<dd> <a class="hot" href="">官方漫画</a></dd>
<dd> <a href="">精美壁纸</a></dd>
<dd> <a class="new" href="">新手指引</a></dd>
</dl>
<dl class="dl2">
<dt></dt>
<dd><a class="hot" href="">谁是车王</a></dd>
<dd><a href="">公开赛</a></dd>
</dl>
<dl class="dl3">
<dt></dt>
<dd><a class="hot" href="">版本合作</a> </dd>
<dd> <a href="">合作专区</a> </dd>
<dd> <a href="">CDK兑换</a> </dd>
</dl>
<dl class="dl4">
<dt></dt>
<dd><a href="">紫砖中心</a> </dd>
<dd> <a href="">道具城</a> </dd>
<dd> <a href="">点卷充值</a> </dd>
</dl>
<dl class="dl5">
<dt></dt>
<dd ><a href="">教学视频</a> </dd>
<dd><a href="">视频中心</a> </dd>
</dl>
<dl class="dl6">
<dt></dt>
<dd >
<a href="">官方论坛</a> </dd>
<dd> <a class="new" href="">掌上飞车</a> </dd>
<dd><a href="">官方微信</a> </dd>
<dd><a href="">官方微博</a> </dd>
</dl>
<dl class="dl7">
<dt></dt>
<dd>
<a href="">在线客服</a></dd>
<dd> <a href="">信用星级</a> </dd>
<dd> <a href="">封号查询</a> </dd>
<dd>> <a href="">账号找回</a> </dd>
<dd> <a href="">家长监控</a> </dd>
<dd> <a href="">防沉迷</a> </dd>
<dd> <a href="">安全中心</a> </dd>
</dl>
</div>
</div>
</div>
<div id="banner" class="container">
<div class="bannerleft">
<div class="left">
<ul class="bannerlist l">
<li><img src="./图片/qqfc/666.jpeg" alt=""></li>
<li><img src="./图片/qqfc/6666.jpeg" alt=""></li>
<li><img src="./图片/qqfc/3585f5d0ab199dfb910f1f2d83ef50d8.jpeg" alt=""></li>
<div class="btnlist">
<ul class="btnlistul">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="btnzjt"><a href=""></a></div>
<div class="btnyjt"><a href=""></a></div>
</div>
</ul>
</div>
<div class="text">
<div class="texttou">
<ul class="textlist ">
<li>综合<a href=""></a></li>
<li>活动<a href=""></a></li>
<li>公告<a href=""></a></li>
<li>赛事<a href=""></a></li>
<li>论坛<a href=""></a></li>
</ul>
<ul>
<p><span style="color: rgb(40,182,224);">摇晃万能咕噜球,抢永久s车</span></p>
<li><span style="color: rgb(52,96,201);">[活动]</span>寻宝活动异常<a href="">关于严厉打击的公告</a></li>
<li><span style="color: rgb(52,96,201);">[活动]</span>全服全新版本<a href=""></a></li>
<li><span style="color: rgb(52,96,201);">[活动]</span>联通/电信二区新版本<a href=""></a></li>
<li><span style="color: rgb(52,96,201);">[活动]</span>每日一抽临时公告<a href=""></a></li>
<li><span style="color: rgb(52,96,201);">[活动]</span>第105赛季车神争霸<a href=""></a></li>
<li><span style="color: rgb(52,96,201);">[活动]</span>寻宝卡活动异常公告</a>
</ul>
</div>
<div class="textdi">
<p>更多质询<a href=""></a></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- QQ飞飞飞飞飞飞车 (侵权删)
1050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
