PC端网页制作
- 一、relative相对定位
- 二、absolute绝对定位
- 三、fixed和sticky及zlndex
- 四、定位实现下拉菜单
- 五、定位实现居中和装饰点
- 六、css添加省略号
- 七、css精灵及好处
- 八、css圆角设置
- 九、PC端企业类型整页制作
- 1.PC端企业类型整页制作(1)
- 2.PC端企业类型整页制作(2)
- 3.PC端企业类型整页制作(3)
- 4.PC端企业类型整页制作(4)
- 5.PC端企业类型整页制作(5)
- 6.PC端企业类型整页制作(6)
- 7.PC端企业类型整页制作(7)
- 8.PC端企业类型整页制作(8)
- 十、PC端游戏类型整页制作
- 1.PC端游戏类型整页制作(1)
- 2.PC端游戏类型整页制作(2)
- 3.PC端游戏类型整页制作(3)
- 4.PC端游戏类型整页制作(4)
- 5.PC端游戏类型整页制作(5、6、7)
- 6.PC端游戏类型整页制作(8)
- 7.PC端游戏类型整页制作(9)
- 8.PC端游戏类型整页制作(10)
- 十一、博文尚美首页
- 十二、QQ飞车首页
一、relative相对定位
position定位
1.position特性
css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。
2.position取值
static(默认)、relative、absolute、fixed、sticky
relative相对定位
1.如果没有定位偏移量，对元素本身没有任何影响
2.不使元素脱离文档流
3.不影响其他元素布局
4.left、top、right、bottom是相对于当前元素自身进行的偏移的
<style>/* #box1{width: 100px; height: 100px; background: red;}#box2{width: 100px; height: 100px; background: blue; margin-left: 100px; margin-top: 100px;}#box3{width: 100px; height: 100px; background: yellow; margin-top: -100px;} */#box1{width: 100px; height: 100px; background: red;}#box2{width: 100px; height: 100px; background: blue; position: relative; left: 100px; top: 100px;}#box3{width: 100px; height: 100px; background: yellow;}</style>
</head>
<body><div id="box1"></div><div id="box2"></div><div id="box3"></div>
</body>
二、absolute绝对定位
absolute绝对定位
1.使元素完全脱离文档流
2.使内联元素支持宽高(让内联具备块特性)
3.使块元素默认宽根据内容决定(让块具备内联的特性)
4.如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)
<style>/* #box1{ width: 100px; height: 100px; background: red; position: absolute;}#box2{ width: 200px; height: 200px; background: blue;} *//* span{ width: 100px; height: 100px; background: red; position: absolute;} div{ background: red; position: absolute; left: 100px; top: 100px;} */#box1{ width: 300px; height: 300px; border: 1px black solid; margin: 200px; position: relative;}#box2{ width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0;}</style>
</head>
<body><!-- <div id="box1"></div><div id="box2"></div> --><!-- <span>这是一个内联的</span> --><!-- <div>这是一个块</div> --><div id="box1"><div id="box2"></div></div>
</body>
三、fixed和sticky及zlndex
fixed固定定位
1.使元素完全脱离文档流
2.使内联元素支持宽高(让内联具备块特性)
3.使块元素默认宽根据内容决定(让块具备内联的特性)
4.相对整个浏览器窗口进行偏移，不受浏览器滚动条的影响
sticky黏性定位
在指定的位置，进行黏性操作。
z-index定位层级
默认层级为0
嵌套时候的层级问题
<style>/* body{ height: 200px;}div{ position: fixed; bottom: 0; right: 0;} *//* body{ height: 200px;}#box1{ width: 300px; height: 300px; border: 1px black solid; margin: 200px; position: relative;}#box2{ width: 100px; height: 100px; background: red; position: fixed; left: 0; top: 0;} *//* body{ height: 2000px;}div{ background: red; position: sticky; top: 100px;} *//* #box1{ width: 100px; height: 100px; background: red; position: absolute; z-index: 1;}#box2{ width: 100px; height: 100px; background: blue; position: absolute;left: 50px; top: 50px; z-index: -1;} */#parent{ width: 100px; height: 100px; border: 1px black solid; position: absolute; z-index: -2;}#box1{ width: 100px; height: 100px; background: red; position: absolute; z-index: 1;}#box2{ width: 100px; height: 100px; background: blue; position: absolute;left: 50px; top: 50px; z-index: -1;}</style>
</head>
<body><!-- <div>这是一个块</div> --><!-- <div id="box1"><div id="box2"></div></div> --><!-- <p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><p>aaaaaa</p><div>这是一个块</div><p>bbbbbb</p><p>bbbbbb</p><p>bbbbbb</p><p>bbbbbb</p><p>bbbbbb</p><p>bbbbbb</p> --><!-- <div id="box1"></div><div id="box2"></div> --><div id="parent"><div id="box1"></div></div><div id="box2"></div>
</body>
四、定位实现下拉菜单
<style>*{ margin: 0; padding: 0;}ul{ list-style: none;}#menu{ width: 100px; height: 30px; margin: 20px auto; border: 1px black solid; position: relative;}#menu ul{ width: 100px; border: 1px black solid; position: absolute; left: -1px; top: 30px; background: white;display: none;}#menu:hover ul{ display: block;}#menu ul li:hover{ background: gray;}p{ text-align: center;}</style>
</head>
<body><div id="menu">卖家中心<ul><li>列表项</li><li>列表项</li><li>列表项</li><li>列表项</li></ul></div><p>测试段落测试段落测试段落测试段落</p>
</body>
五、定位实现居中和装饰点
<style>#box1{ width: 300px; height: 300px; border: 1px black solid; position: relative;}#box2{ width: 100px; height: 100px; background: red; position: absolute; left: 50%; top: 50%; margin: -50px 0 0-50px;}</style>
</head>
<body><div id="box1"><div id="box2"></div></div>
</body>
六、css添加省略号
width
必须有一个固定的宽
white-space: nowrap
不让内容折行
overflow : hidden
隐藏溢出的内容
text-overflow : ellipsis
添加省略号
<style>#content{ width: 200px; border: 1px black solid; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}</style>
</head>
<body><div id="content">测试文字测试文字测试文字测试文字测试文字</div>
</body>
七、css精灵及好处
CSS Sprite
特性
CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及的所有零星图片都包含到一张大图中去加载。
好处
可以减少图片的质量，网页的图片加载速度快
减少图片的请求的次数，加快网页的打开
<style>#box1{ width: 20px; height: 21px; background: url(./images/tianqi_1.png) no-repeat left -596px;}#box2{ width: 300px; height: 50px; border: 1px black solid; line-height: 50px; padding-left: 30px;background: url(./images/tianqi_2.jpg) no-repeat right -536px;}</style>
</head>
<body><div id="box1"></div><div id="box2">产品中心</div>
</body>
八、css圆角设置
border-radius
给标签添加圆角
<style>/* #box{ width: 200px; height: 200px; background: red; border-radius: 100px;} *//* #box{ width: 300px; height: 300px; background: red; border-radius: 50%;} *//* #box{ width: 300px; height: 300px; background: red; border-radius: 10px 20px 30px 40px;} *//* #box{ width: 300px; height: 300px; background: red; border-radius: 20px / 40px;} */#box{ width: 300px; height: 150px; background: red; border-radius: 150px 150px 0 0;}</style>
</head>
<body><div id="box"></div>
</body>
九、PC端企业类型整页制作
1.PC端企业类型整页制作(1)
通栏 : 自适应浏览器的宽度
版心 : 固定一个宽度，并且让容器居中
common.css(博文尚美首页)
*{ margin: 0; padding: 0;}
ul,ol{ list-style: none;}
img{ display: block;}
a{ text-decoration: none; color: #FF646464;}
h1,h2,h3{ font-size: 16px;}
border{ 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%;}
2.PC端企业类型整页制作(2)
common.css
#head{ height: 81px;}
#head .head_logo{ width: 162px; height: 44px; margin-top: 19px;}
#head .head_menu{ font-size: 14px;}
#head .head_menu li{ float: left; margin-left: 58px;}
<link rel="stylesheet" href="./css/common.css">
</head>
<body><div id="head" class="container"><div class="head-logo l"><a href="#"><img src="./images/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>
</body>
3.PC端企业类型整页制作(3)
<style>#banner{ position: relative;}#banner .banner_list{ width: 100%; height: 469px; position: relative;}#banner .banner_list li{ width: 100%; height: 100%; background: center 0 no-repeat; position: absolute; left: 0; top: 0; opacity: 0; z-index: 1;}#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;}</style>
</head>
<body><div id="head" class="container"><div class="head-logo l"><a href="#"><img src="./images/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"><ul class="banner_list"><li class="active" style="background-image:url(./images/banner.png) ;"><a href="#"></a></li><li style="background-image:url(./images/banner.png) ;"><a href="#"></a></li><li style="background-image:url(./images/banner.png) ;"><a href="#"></a></li></ul><ol class="banner_btn"><li class="active"></li><li></li><li></li><li></li></ol></div>
</body>
4.PC端企业类型整页制作(4)
common.css.area_title{ margin-top: 60px; text-align: center;}
.area_title h2{ height: 20px; line-height: 20px; font-size: 20px; color: #363636; background:
url(../images/title_bg.png) no-repeat center 7px; }
.area_title p{ color: #9F9F9F; font-size: 14px; line-height: 34px;}
#service{ overflow: hidden; min-height: 407px;}
<div id="service" class="container"><div class="area_title"><h2>服务范围</h2><p>OUR DERVICES</p></div></div>
5.PC端企业类型整页制作(5)
#service .service_list{ text-align: center;}#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-image: url(./images/web1.png);}#service .service_list li:nth-of-type(2) div{ background-image: url(./images/mail1.png);}#service .service_list li:nth-of-type(3) div{ background-image: url(./images/graphic1.png);}#service .service_list li:nth-of-type(4) div{ background-image: url(./images/e-bussiness1.png);}#service .service_list h3{ font-size: 18px; color: #434343; line-height: 36px; margin-top: 25px;}#service .service_list p{ font-size: 14px; color: #6D6D6D; line-height: 22px;}
<div id="service" class="container"><div class="area_title"><h2>服务范围</h2><p>OUR DERVICES</p></div><ul class="service_list"><li><div></div><h3>1.WEB DESIGN</h3><p>企业品牌网站设计/手机网站制作<br>动画网站创意设计</p></li><li><div></div><h3>2.GRAPHIC DESIGN</h3><p>标志logo设计/产品宣传册设计<br>企业广告/海报设计</p></li><li><div></div><h3>3.E-BUSINESS PLAN</h3><p>淘宝/天猫装修设计及运营推广<br>企业微博、微信营销</p></li><li><div></div><h3>4.MAILBOXAGENTS</h3><p>腾讯/网易企业邮箱品牌代理<br>个性化邮箱定制开发</p></li></ul></div>
6.PC端企业类型整页制作(6)
#case{ background: #f8f8f8;}#case .container{ min-height: 460px; overflow: hidden;}#case .area_title{ margin-top: 55px;}#case .area_title h2{ color: #66C5B4;}#case .case_list{ margin-top: 28px;}#case .case_list li{ float: left; width: 340px; margin: 0 10px;}#case .case_btn{ width: 176px; height: 37px; background: #66C5B4; margin: 0 auto; border-radius: 25px;line-height: 37px; text-align: center; color: white; font-size: 14px; margin-top: 36px;}#case .case_btn a{ display: block; width: 100%; height: 100%; color: white;}<div id="case" class="container-fluid"><div class="container"><div class="area_title"><h2>{ 客户案例 }</h2><p>With the best professional technology, to design the best innovative website</p></div><ul class="case_list clear"><li><a href="#"><img src="./images/20141121095216750.png" alt=""></a></li><li><a href="#"><img src="./images/20141121095528549.png" alt=""></a></li><li><a href="#"><img src="./images/20141121105856226.png" alt=""></a></li></ul><div class="case_btn"><a href="#">VIEW MORE</a></div></div></div>
7.PC端企业类型整页制作(7)
#news{ min-height: 450px; overflow: hidden;}#news .area_title{ margin-top: 65px;}#news dl{ margin-top: 48px;}#news dt{ width: 234px;}#news dd{ width: 846px;}#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_test{ width: 310px; margin-left: 20px;}#news .news_test h3{ font-size: 14px;}#news .news_test h3 a{ color: #3F3F3F;}#news .news_test p{ color: #A4A4A4; font-size: 12px; line-height: 21px; margin-top: 17px;}
<div id="news" class="container"><div class="area_title"><h2>最新资讯</h2><p>TEH LATEST NEWS</p></div><dl><dt class="l"><img src="./images/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_test l"><h3><a href="#">网站排名进入前三的技巧说明</a></h3><p>很多客户都会纳闷为什么自己的网站老是优化不到搜素引擎首页，更不用说进首页前三了。那么网站优化···</p></div></li><li><div class="news_date l"><i>08</i><span>Jan</span></div><div class="news_test l"><h3><a href="#">flash网站制作的优缺点</a></h3><p>虽然HTML5程序语言出现，大有逐渐代替Flash网站的趋势，但是过于生硬的HTML5动画效果，始终···</p></div></li><li><div class="news_date l"><i>07</i><span>Jan</span></div><div class="news_test 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_test l"><h3><a href="#">哪些网站优化手法属于网站过度优化</a></h3><p>大部分人都想让自己的网站，一夜之间出现在搜索引擎并且独占鳌头。但是事实告诉我们罗马不是一···</p></div></li></ul></dd></dl></div>
8.PC端企业类型整页制作(8)
#foot{ background: #66c5b4;}#foot .container{ height: 54px; line-height: 54px; font-size: 12px; color: white;}#foot div a{ color: white; margin: 0 10px;}
<div id="foot" class="container_fluid"><div class="container"><p class="l">Copyright 2006-2014 Bowenshangmei Culture All Rights Resered</p><div class="r"><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Contact</a> </div></div></div>
十、PC端游戏类型整页制作
1.PC端游戏类型整页制作(1)
common.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: 980px; margin: 0 auto; position: relative;}
.container-fluid{ width: 100%;}
2.PC端游戏类型整页制作(2)
#head{ background: url(../images/head_bg.png) repeat-x;}
#head .container{ height: 41px;}
#head .head_logo{ width: 220px; height: 41px; background: url(../images/ost-bg.png) no-repeat 0 -38px;}
#head .head_logo a{ display: block; width: 100%; height: 100%; text-indent: -9999px; overflow: hidden;}
#head .head_ad{ margin-left: 8px;}
#head .head_menu{ font-size: 12px;}
#head .head_menu div{ height: 18px; margin-top: 13px; background: url(../images/ost.png) no-repeat;}
#head .head_menu .head_menu_czah{ margin-right: 26px; padding-left: 20px; background-position: left -92px;}
#head .head_menu .head_menu_top{ padding-left: 17px; background-position: right -85px;}
<div id="head" class="container-fluid"><div class="container"><div class="head_logo l"><a href="#">腾讯游戏</a></div><div class="head_ad l"><a href="#"><img src="./images/ad.jpg" alt=""></a></div><div class="head_menu l"><div class="head_menu_czsh l"><a href="#">成长守护平台</a></div><div class="head_menu_top l"><a href="#">腾讯游戏排行榜</a></div></div></div></div>
3.PC端游戏类型整页制作(3)
#main{ background: url(./images/mbg1216.jpg) no-repeat center 0;}#nav{ min-height: 236px; background:url(./images/nav_down_re.png) repeat-x, url(./images/nav.png) no-repeat center 0;overflow: hidden;}#nav .nav_logo{ width: 138px; height: 112px; margin: 15px auto;}
<div id="main" class="container-fluid"><div id="nav" class="container-fluid"><div class="nav_logo"><a href="#"><img src="./images/inside_logo.png" alt="QQ飞车" title="QQ飞车"></a></div></div><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>
4.PC端游戏类型整页制作(4)
#nav dl{ position: absolute; top: 0;}#nav dt{ height: 66px;}#nav dt a{ width: 100%; height: 100%; display: block; text-indent: -999px; overflow: hidden;}#nav dd{ line-height: 27px; font-size: 12px; text-align: center;}#nav dd a{ color: white; position: relative;}#nav dd a:hover{ color: red; text-decoration: underline;}#nav dd a.hot:after{ content: ""; display: block; width: 12px; height: 12px; background: url(./images/nav_tips.png) no-repeat 0 -12px; position: absolute; right: -15px; top: 0;}#nav dd a.new:after{ content: ""; display: block; width: 12px; height: 12px; background: url(./images/nav_tips.png) no-repeat 0 0; position: absolute; right: -15px; top: 0;}#nav .nav_index{ width: 65px; left: 0;}#nav .nav_zl{ width: 69px; left: 98px;}#nav .nav_ss{ width: 74px; left: 203px;}#nav .nav_hd{ width: 68px; left: 325px;}
<div id="nav" class="container-fluid"><div class="container"><div class="nav_logo"><a href="#"><img src="./images/inside_logo.png" alt="QQ飞车" title="QQ飞车"></a></div><dl class="nav_index"><dt><a href="#">首页</a></dt></dl><dl class="nav_zl"><dt></dt><dd><a href="#">新手指引</a></dd><dd><a class="hot" href="#">官方漫画</a></dd><dd><a class="new" href="#">飞车手游</a></dd><dd><a href="#">精美壁纸</a></dd><dd><a href="#">游戏下载</a></dd></dl><dl class="nav_ss"><dt></dt><dd><a class="hot" href="#">SSC</a></dd><dd><a href="#">谁是车王</a></dd><dd><a href="#">全民争霸赛</a></dd></dl><dl class="nav_hd"><dt></dt><dd><a class="hot" href="#">版本中心</a></dd><dd><a href="#">合作专区</a></dd><dd><a href="#">CDK兑奖</a></dd></dl></div></div>
5.PC端游戏类型整页制作(5、6、7)
#banner{ height: 276px; background: url(./images/top.png) no-repeat; margin-top: 20px;}#banner .banner_left{ width: 240px; height: 310px; background: url(./images/down_user_spr.png) no-repeat;margin: -20px 0 0 7px;}#banner .banner_download p{ width: 91px; height: 25px; background: url(./images/down_user_spr.png) no-repeat-253px 0; margin:0 auto; text-indent: -9999px; overflow: hidden;}#banner .banner_download p:first-child{ background-position: -253px 0; margin-top: 44px;}#banner .banner_download p:last-child{ background-position: -253px -25px;}/* CSS3简单的动画 */#banner .banner_download:hover p:first-child{ animation: .5s upMore;}@keyframes upMore{0%{ transform: translateY(-40px);opacity: 0;}100%{ transform: translateY(0);opacity: 1;}}#banner .banner_download:hover p:last-child{ animation: .5s downMore;}@keyframes downMore{0%{ transform: translateY(40px);opacity: 0;}100%{ transform: translateY(0);opacity: 1;}}/* CSS3简单的动画 */#banner .banner_user div{ width: 56px; height: 56px; border-radius: 50%; margin: 85px auto 0 auto; border: 2px #283257 solid;box-sizing: border-box; overflow: hidden;}#banner .banner_user p{ text-align: center; font-size: 12px; color: white; margin-top: 20px;}#banner .banner_user a{ color: #34f1d0;}<div id="banner" class="container"><div class="banner_left l"><div class="banner_download"><p>下载游戏</p><p>DOWLOAD</p></div><div class="banner_user"><div><img src="./images/56x56.jpg" alt=""></div><p>欢迎<a href="#">登录</a>,进入飞车世界</p></div></div><div class="banner_center l"></div><div class="banner_right l"></div></div>
6.PC端游戏类型整页制作(8)
#banner .banner_list{ width: 497px; height: 253px; overflow: hidden; margin: 13px 0 0 6px;}#banner .banner_list_ul{ width: 2000px;}#banner .banner_list_ul li{ width: 497px; height: 253px; float: left;}#banner .banner_bottomline{ height: 37px; background: rgba(0,0,0,5); border-top: 1px #514b55 solid;position: absolute; bottom: 0; left: 0;}#banner .banner_bottomline_ul{ width: 100%; text-align: center; margin-top: 11px;}#banner .banner_bottomline_ul li{ display: inline-block; width: 15px; height: 15px; background: url(./images/top.png) no-repeat -603px -299ppx;}#banner .banner_bottomline_ul li.active{ background-position: -581px -299px ;}
<div class="banner_center l"><div class="banner_list"><ul class="banner_list_ul"><li><a href="#"><img src="https://ossweb-img.qq.com/upload/adw/image/194/20221118/6bd39b88266fe7a2b44b874591ce3c4a.jpeg" alt=""></a></li><li><a href="#"><img src="https://img2.baidu.com/it/u=3740281595,290561413&fm=253&fmt=auto&app=138&f=JPEG?w=1082&h=500" alt=""></a></li><li><a href="#"><img src="https://img0.baidu.com/it/u=3263375089,181413362&fm=253&fmt=auto&app=138&f=JPEG?w=1273&h=500" alt=""></a></li></ul><div class="banner_bottomline"><ul class="banner_bottomline_ul"><li class="active"></li><li></li><li></li></ul></div></div></div>
7.PC端游戏类型整页制作(9)
#banner .banner_bottomline_leftbtn,#banner .banner_bottomline_rightbtn{ width: 12px; height: 22px; position: absolute; top: 5px; background: url(./images/top.png) no-repeat ; cursor: pointer;}#banner .banner_bottomline_leftbtn{ left: 5px; background-position: -542px -296px;}#banner .banner_bottomline_rightbtn{ right: 5px; background-position: -554px -296px;}#banner .banner_bottomline_leftbtn:hover{ background-position: -542px -325px;}#banner .banner_bottomline_rightbtn:hover{ background-position: -554px -325px;}#banner .banner_list_lt,#banner .banner_list_rt,#banner .banner_list_rb,#banner .banner_list_lb{ width: 12px; height: 12px;background: url(./images/top.png) no-repeat; position: absolute;}#banner .banner_list_lt{ left: -2px; top: -4px; background-position: -621px -299px;}#banner .banner_list_rt{ right: -2px; top: -4px; background-position: -634px -299px;}#banner .banner_list_rb{ right: -2px; bottom: -5px; background-position: -634px -312px;}#banner .banner_list_lb{ left: -2px; bottom: -5px; background-position: -621px -312px;}
<i class="banner-list_lt"></i>
<i class="banner-list_rt"></i>
<i class="banner-list_rb"></i>
<i class="banner-list_lb"></i>
8.PC端游戏类型整页制作(10)
#banner .banner_right{ width: 209px; height: 255px; position: relative; margin: 12px 0 0 12px;}#banner .banner_list_lt,#banner .banner_list_rt,#banner .banner_list_rb,#banner .banner_list_lb{ width: 15px;height: 15px; background: url(./images/top.png) no-repeat; position: absolute;}#banner .banner_right_lt{ left: -4px; top: -4px; background-position: -681px -298px;}#banner .banner_right_rt{ right: -4px; top: -4px; background-position: -696px -298px;}#banner .banner_right_rb{ right: -4px; bottom: -6x; background-position: -696px -313px;}#banner .banner_right_lb{ left: -4px; top: -6px; background-position: -681px -313;} <i class="banner_right_lt"></i><i class="banner_right_rt"></i><i class="banner_right_rb"></i><i class="banner_right_lb"></i>
十一、博文尚美首页
common.css
*{ margin: 0; padding: 0;}
ul,ol{ list-style: none;}
img{ display: block;}
a{ text-decoration: none; color: #646464;}
h1,h2,h3{ font-size: 16px;}
border{ 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{ height: 81px;}
#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(../images/title_bg.png) no-repeat center 7px; font-weight: normal;}
.area_title p{ color: #9F9F9F; font-size: 14px; line-height: 34px;}
<style>#banner{ position: relative;}#banner .banner_list{ width: 100%; height: 469px; position: relative;}#banner .banner_list li{ width: 100%; height: 100%; background: center 0 no-repeat; position: absolute; left: 0; top: 0; opacity: 0; z-index: 1;}#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;}#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-image: url(./images/web1.png);}#service .service_list li:nth-of-type(2) div{ background-image: url(./images/mail1.png);}#service .service_list li:nth-of-type(3) div{ background-image: url(./images/graphic1.png);}#service .service_list li:nth-of-type(4) div{ background-image: url(./images/e-bussiness1.png);}#service .service_list h3{ font-size: 18px; color: #434343; line-height: 36px; margin-top: 25px;}#service .service_list p{ font-size: 14px; color: #6D6D6D; line-height: 22px;}#case{ background: #f8f8f8;}#case .container{ min-height: 460px; overflow: hidden;}#case .area_title{ margin-top: 55px;}#case .area_title h2{ color: #66C5B4;}#case .case_list{ margin-top: 28px;}#case .case_list li{ float: left; width: 340px; margin: 0 10px;}#case .case_btn{ width: 176px; height: 37px; background: #66C5B4; margin: 0 auto; border-radius: 25px;line-height: 37px; text-align: center; color: white; font-size: 14px; margin-top: 36px;}#case .case_btn a{ display: block; width: 100%; height: 100%; color: white;}#news{ min-height: 450px; overflow: hidden;}#news .area_title{ margin-top: 65px;}#news dl{ margin-top: 48px;}#news dt{ width: 234px;}#news dd{ width: 846px;}#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_test{ width: 310px; margin-left: 20px;}#news .news_test h3{ font-size: 14px;}#news .news_test h3 a{ color: #3F3F3F;}#news .news_test p{ color: #A4A4A4; font-size: 12px; line-height: 21px; margin-top: 17px;}#foot{ background: #66c5b4;}#foot .container{ height: 54px; line-height: 54px; font-size: 12px; color: white;}#foot div a{ color: white; margin: 0 10px;}</style></head>
<body><div id="head" class="container"><div class="head-logo l"><a href="#"><img src="./images/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"><ul class="banner_list"><li class="active" style="background-image:url(./images/banner.png) ;"><a href="#"></a></li><li style="background-image:url(./images/banner.png) ;"><a href="#"></a></li><li style="background-image:url(./images/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 DERVICES</p></div><ul class="service_list"><li><div></div><h3>1.WEB DESIGN</h3><p>企业品牌网站设计/手机网站制作<br>动画网站创意设计</p></li><li><div></div><h3>2.GRAPHIC DESIGN</h3><p>标志logo设计/产品宣传册设计<br>企业广告/海报设计</p></li><li><div></div><h3>3.E-BUSINESS PLAN</h3><p>淘宝/天猫装修设计及运营推广<br>企业微博、微信营销</p></li><li><div></div><h3>4.MAILBOXAGENTS</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 professional technology, to design the best innovative website</p></div><ul class="case_list clear"><li><a href="#"><img src="./images/20141121095216750.png" alt=""></a></li><li><a href="#"><img src="./images/20141121095528549.png" alt=""></a></li><li><a href="#"><img src="./images/20141121105856226.png" alt=""></a></li></ul><div class="case_btn"><a href="#">VIEW MORE</a></div></div></div><div id="news" class="container"><div class="area_title"><h2>最新资讯</h2><p>TEH LATEST NEWS</p></div><dl><dt class="l"><img src="./images/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_test l"><h3><a href="#">网站排名进入前三的技巧说明</a></h3><p>很多客户都会纳闷为什么自己的网站老是优化不到搜素引擎首页，更不用说进首页前三了。那么网站优化···</p></div></li><li><div class="news_date l"><i>08</i><span>Jan</span></div><div class="news_test l"><h3><a href="#">flash网站制作的优缺点</a></h3><p>虽然HTML5程序语言出现，大有逐渐代替Flash网站的趋势，但是过于生硬的HTML5动画效果，始终···</p></div></li><li><div class="news_date l"><i>07</i><span>Jan</span></div><div class="news_test 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_test 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">Copyright 2006-2014 Bowenshangmei Culture All Rights Resered</p><div class="r"><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Contact</a> </div></div></div></body>
</html>十二、QQ飞车首页
common.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: 980px; margin: 0 auto; position: relative;}
.container-fluid{ width: 100%;}#head{ background: url(../images/head_bg.png) repeat-x;}
#head .container{ height: 41px;}
#head .head_logo{ width: 220px; height: 41px; background: url(../images/ost-bg.png) no-repeat 0 -38px;}
#head .head_logo a{ display: block; width: 100%; height: 100%; text-indent: -9999px; overflow: hidden;}
#head .head_ad{ margin-left: 8px;}
#head .head_menu{ font-size: 12px;}
#head .head_menu div{ height: 18px; margin-top: 13px; background: url(../images/ost.png) no-repeat;}
#head .head_menu .head_menu_czah{ margin-right: 26px; padding-left: 20px; background-position: left -92px;}
#head .head_menu .head_menu_top{ padding-left: 17px; background-position: right -85px;} <style>#main{ background: url(./images/mbg1216.jpg) no-repeat center 0;}#nav{ background:url(./images/nav_down_re.png) repeat-x, url(./images/nav.png) no-repeat center 0;}#nav .container{ min-height: 236px; overflow: hidden;}#nav .nav_logo{ width: 138px; height: 112px; margin: 15px auto;}#nav dl{ position: absolute; top: 0;}#nav dt{ height: 66px;}#nav dt a{ width: 100%; height: 100%; display: block; text-indent: -9999px; overflow: hidden;}#nav dd{ line-height: 27px; font-size: 12px; text-align: center;}#nav dd a{ color: white; position: relative;}#nav dd a:hover{ color: red; text-decoration: underline;}#nav dd a.hot:after,#nav dd a.new:after{ content: ""; display: block; width: 12px; height: 12px; background: url(./images/nav_tips.png) no-repeat; position: absolute; right: -15px; top: 0;}#nav dd a.hot:after{ background-position: 0 -12px;}#nav dd a.new:after{ background-position: 0 0;}#nav .nav_index{ width: 65px; left: 0;}#nav .nav_zl{ width: 69px; left: 98px;}#nav .nav_ss{ width: 74px; left: 203px;}#nav .nav_hd{ width: 68px; left: 325px;}#link{ height: 175px;}#link a{ width: 463px; height: 100%; display: block; margin: 0 auto;}#banner{ height: 276px; background: url(./images/top.png) no-repeat; margin-top: 20px;}#banner .banner_left{ width: 240px; height: 310px; background: url(./images/down_user_spr.png) no-repeat;margin: -20px 0 0 7px;}#banner .banner_download p{ width: 91px; height: 25px; background: url(./images/down_user_spr.png) no-repeat-253px 0; margin:0 auto; text-indent: -9999px; overflow: hidden;}#banner .banner_download p:first-child{ background-position: -253px 0; margin-top: 44px;}#banner .banner_download p:last-child{ background-position: -253px -25px;}/* CSS3简单的动画 */#banner .banner_download:hover p:first-child{ animation: .5s upMore;}@keyframes upMore{0%{ transform: translateY(-40px);opacity: 0;}100%{ transform: translateY(0);opacity: 1;}}#banner .banner_download:hover p:last-child{ animation: .5s downMore;}@keyframes downMore{0%{ transform: translateY(40px);opacity: 0;}100%{ transform: translateY(0);opacity: 1;}}/* CSS3简单的动画 */#banner .banner_user div{ width: 56px; height: 56px; border-radius: 50%; margin: 85px auto 0 auto; border: 2px #283257 solid;box-sizing: border-box; overflow: hidden;}#banner .banner_user img{ width: 100%; height: 100%;}#banner .banner_user p{ text-align: center; font-size: 12px; color: white; margin-top: 20px;}#banner .banner_user a{ color: #34f1d0;}#banner .banner_list{ width: 497px; height: 253px; overflow: hidden; margin: 13px 0 0 4px; position: relative;}#banner .banner_list_ul{ width: 2000px;}#banner .banner_list_ul li{ width: 497px; height: 253px; float: left;}#banner .banner_bottomline{ width: 100%; height: 37px; background: rgba(0,0,0,5); border-top: 1px #514b55 solid;position: absolute; bottom: 0; left: 0;}#banner .banner_bottomline_ul{ text-align: center; margin-top: 11px;}#banner .banner_bottomline_ul li{ display: inline-block; width: 15px; height: 15px; background: url(./images/top.png) no-repeat -603px -299ppx; cursor: pointer;}#banner .banner_bottomline_ul li.active{ background-position: -581px -299px;}#banner .banner_bottomline_leftbtn,#banner .banner_bottomline_rightbtn{ width: 12px; height: 22px; position: absolute; top: 5px; background: url(./images/top.png) no-repeat ; cursor: pointer;}#banner .banner_bottomline_leftbtn{ left: 5px; background-position: -542px -296px;}#banner .banner_bottomline_rightbtn{ right: 5px; background-position: -554px -296px;}#banner .banner_bottomline_leftbtn:hover{ background-position: -542px -325px;}#banner .banner_bottomline_rightbtn:hover{ background-position: -554px -325px;}#banner .banner_list_lt,#banner .banner_list_rt,#banner .banner_list_rb,#banner .banner_list_lb{ width: 12px; height: 12px;background: url(./images/top.png) no-repeat; position: absolute;}#banner .banner_list_lt{ left: -2px; top: -4px; background-position: -621px -299px;}#banner .banner_list_rt{ right: -2px; top: -4px; background-position: -634px -299px;}#banner .banner_list_rb{ right: -2px; bottom: -5px; background-position: -634px -312px;}#banner .banner_list_lb{ left: -2px; bottom: -5px; background-position: -621px -312px;}#banner .banner_right{ width: 209px; height: 255px; position: relative; margin: 12px 0 0 12px;}#banner .banner_list_lt,#banner .banner_list_rt,#banner .banner_list_rb,#banner .banner_list_lb{ width: 15px;height: 15px; background: url(./images/top.png) no-repeat; position: absolute;}#banner .banner_right_lt{ left: -4px; top: -4px; background-position: -681px -298px;}#banner .banner_right_rt{ right: -4px; top: -4px; background-position: -696px -298px;}#banner .banner_right_rb{ right: -4px; bottom: -6x; background-position: -696px -313px;}#banner .banner_right_lb{ left: -4px; top: -6px; background-position: -681px -313;}</style>
</head>
<body><div id="head" class="container-fluid"><div class="container"><div class="head_logo l"><a href="#">腾讯游戏</a></div><div class="head_ad l"><a href="#"><img src="./images/ad.jpg" alt=""></a></div><div class="head_menu l"><div class="head_menu_czsh l"><a href="#">成长守护平台</a></div><div class="head_menu_top l"><a href="#">腾讯游戏排行榜</a></div></div></div></div><div id="main" class="container-fluid"><div id="nav" class="container-fluid"><div class="container"><div class="nav_logo"><a href="#"><img src="./images/inside_logo.png" alt="QQ飞车" title="QQ飞车"></a></div><dl class="nav_index"><dt><a href="#">首页</a></dt></dl><dl class="nav_zl"><dt></dt><dd><a href="#">新手指引</a></dd><dd><a class="hot" href="#">官方漫画</a></dd><dd><a class="new" href="#">飞车手游</a></dd><dd><a href="#">精美壁纸</a></dd><dd><a href="#">游戏下载</a></dd></dl><dl class="nav_ss"><dt></dt><dd><a class="hot" href="#">SSC</a></dd><dd><a href="#">谁是车王</a></dd><dd><a href="#">全民争霸赛</a></dd></dl><dl class="nav_hd"><dt></dt><dd><a class="hot" href="#">版本中心</a></dd><dd><a href="#">合作专区</a></dd><dd><a href="#">CDK兑奖</a></dd></dl></div></div><div id="link" class="container"><a href="#"></a></div><div id="banner" class="container"><div class="banner_left l"><div class="banner_download"><p>下载游戏</p><p>DOWLOAD</p></div><div class="banner_user"><div><img src="./images/56x56.jpg" alt=""></div><p>欢迎<a href="#">登录</a>,进入飞车世界</p></div></div><div class="banner_center l"><div class="banner_list"><ul class="banner_list_ul"><li><a href="#"><img src="https://ossweb-img.qq.com/upload/adw/image/194/20221118/6bd39b88266fe7a2b44b874591ce3c4a.jpeg" alt=""></a></li><li><a href="#"><img src="https://img2.baidu.com/it/u=3740281595,290561413&fm=253&fmt=auto&app=138&f=JPEG?w=1082&h=500" alt=""></a></li><li><a href="#"><img src="https://img0.baidu.com/it/u=3263375089,181413362&fm=253&fmt=auto&app=138&f=JPEG?w=1273&h=500" alt=""></a></li></ul><div class="banner_bottomline"><ul class="banner_bottomline_ul"><li class="active"></li><li></li><li></li></ul><div class="banner_bottomline_leftbtn"></div><div class="banner_bottomline_rightbtn"></div></div><i class="banner-list_lt"></i><i class="banner-list_rt"></i><i class="banner-list_rb"></i><i class="banner-list_lb"></i></div></div><div class="banner_right l"><a href="#"><img src="" alt=""></a><i class="banner_right_lt"></i><i class="banner_right_rt"></i><i class="banner_right_rb"></i><i class="banner_right_lb"></i></div></div><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div></body>
</html>
