用css，html，js搭建一个书店购物系统，如下：
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>商城</title> | |
| <link rel="stylesheet" type="text/css" href="css/index.css" /> | |
| <script type="text/javascript" src="js/index.js"></script> | |
| </head> | |
| <style> | |
| *{ | |
| padding: 0px; | |
| margin: 0px; | |
| background-color: lightcyan; | |
| } | |
| body{ | |
| background-color: #F5F5F5 | |
| } | |
| /*--------------------logo,menu,login--------------------*/ | |
| /*设置页眉的位置*/ | |
| .header{ | |
| width: 1200px; | |
| margin: 25px auto; /*注意空格分开而不是逗号*/ | |
| } | |
| /*子菜单不显示*/ | |
| .header .menu ul{ | |
| display: none; | |
| list-style: none; /*去点*/ | |
| /*关联banner布局*/ | |
| position: absolute; | |
| width: 80px; | |
| opacity: 0.5; /*透明效果*/ | |
| background-color: white; | |
| } | |
| /*设置菜单和logo位置*/ | |
| .header .logo{ | |
| float: left; | |
| position: relative; | |
| } | |
| /*菜单位置*/ | |
| .header .menu{ | |
| float: left; | |
| position: relative; | |
| margin-top: 20px; | |
| margin-left: 5px; | |
| } | |
| /*menu浮动事件 菜单折叠*/ | |
| .header .menu:hover ul{ | |
| display: block; | |
| } | |
| /*--------样式--------*/ | |
| /*菜单间距*/ | |
| .header .menu ul li{ | |
| margin-top: 20px; | |
| text-align: center; /*和菜单标题同时居中*/ | |
| } | |
| /*菜单边框*/ | |
| .header .menu .menu_title{ | |
| border-bottom: 1px solid black; | |
| padding-bottom: 20px; | |
| width: 80px; | |
| text-align: center; | |
| } | |
| /*超级链接去下划线*/ | |
| a{ | |
| text-decoration: none; | |
| } | |
| /*---------------login样式设置---------------*/ | |
| .header .auth{ | |
| float: right; | |
| } | |
| .header .auth ul li{ | |
| float: left; | |
| margin-right: 30px; | |
| margin-top: 20px; /*上边距*/ | |
| list-style: none; | |
| } | |
| /*---------------banner样式---------------*/ | |
| .content{ | |
| /*响应式布局始终居中*/ | |
| width: 1200px; | |
| margin: 25px auto; | |
| } | |
| /*图片距离*/ | |
| .content .banner .banner_img{ | |
| margin-top: 50px; | |
| height: 450px; | |
| width: 1152px; | |
| } | |
| /*---------------正文图片样式---------------*/ | |
| /*整体图片横向布局*/ | |
| .content .img_content ul{ | |
| width: 1200px; | |
| } | |
| .content .img_content ul li{ | |
| width: 500px; /*360*3+120*/ | |
| float: left; | |
| margin: 0px 100px 150px 0; | |
| list-style: none; | |
| background-color: #FFFFFF; | |
| /*处理边框*/ | |
| margin-top: 20px; | |
| height: 400px; /*列表边框*/ | |
| width: 280px; | |
| /*位置， 垂直阴影位置，渐变距离，阴影尺寸，阴影颜色*/ | |
| box-shadow: 0 0 10px 9px rgb(179, 177, 177) | |
| } | |
| /*标题设置*/ | |
| .content .img_content .info h3{ | |
| font-size: 25px; | |
| color: red; | |
| margin-top: 20px; | |
| margin-bottom: 20px; | |
| } | |
| /*图片的段落信息设置*/ | |
| .content .img_content .info p{ | |
| line-height: 20px; | |
| /*加一个下边距和价格隔开*/ | |
| margin-bottom: 15px; | |
| } | |
| .content .img_content .info{ | |
| margin-left: 30px; | |
| margin-right: 30px; | |
| } | |
| /*价格样式*/ | |
| .content .img_content .info .img_btn .price{ | |
| color: red; | |
| font-size: 20px; | |
| } | |
| /*购物车设置*/ | |
| .content .img_content .info .img_btn{ | |
| width: 300px; | |
| } | |
| .content .img_content .info .img_btn .btn{ | |
| width: 60px; | |
| height: 30px; | |
| background-color: rgb(247, 129, 75); | |
| text-align: center; | |
| border-radius: 5px; /*圆角矩形*/ | |
| float: right; | |
| } | |
| .content .img_content .info .img_btn .btn .cart img{ | |
| width: 60px; | |
| height: 20px; | |
| margin-top: 5px; | |
| } | |
| .content .img_content .info .img_btn .price{ | |
| float: left; | |
| } | |
| /*页码导航栏*/ | |
| .content .page_nav{ | |
| width: 100%; /*大小不超出content*/ | |
| height: 60px; | |
| line-height: 60px; | |
| /*border: 1px solid black;*/ | |
| /*溢出处理*/ | |
| overflow:hidden; | |
| } | |
| .content .page_nav ul li{ | |
| float: left; | |
| margin-right: 20px; | |
| list-style: none; | |
| } | |
| .content .page_nav ul{ | |
| width: 500px; | |
| margin: auto; | |
| overflow:hidden; | |
| } | |
| /*第一页设置背景圆*/ | |
| .content .page_nav .first_page{ | |
| border-radius: 50%; | |
| background-color: #c5c5c5; | |
| padding: 3px 9px; /*圆心内部边距把圆撑起来*/ | |
| } | |
| /*-------------------------页脚区域设计-------------------------*/ | |
| .footer{ | |
| width: 1200px; | |
| height: 100px; | |
| margin: 10px auto; | |
| /*加一条上边框分割线*/ | |
| border-top:1px solid #ccc; | |
| overflow: hidden; | |
| } | |
| .footer p{ | |
| text-align: center; | |
| line-height: 80px; | |
| } | |
| .footer p span{ | |
| color: #ff1490; | |
| } | |
| </style> | |
| <body> | |
| <!-------------页眉板块----------------> | |
| <div class="header"> | |
| <!-- 设置logo --> | |
| <div class="logo"> | |
| <img src="b.jpg" /> | |
| </div> | |
| <!-- 设置菜单 --> | |
| <div class="menu" οnmοuseleave="show_menu1()"> | |
| <div class="menu_title" οnclick="show_menu()"> | |
| <a href="#">欢迎图书店</a> | |
| </div> | |
| <ul id="menu1"> | |
| <li><a href="dl.html">登陆</a></li> | |
| <li><a href="zc.html">注册</a></li> | |
| <li><a href="gwc.html">购书</a></li> | |
| <li><a href="">看书</a></li> | |
| <li><a href="">听书</a></li> | |
| </ul> | |
| </div> | |
| <!-- 设置用户登录 --> | |
| <div class="auth"> | |
| <ul> | |
| <li><a href="sdjs.html">书店介绍</a></li> | |
| <li><a href="tswjtc.html">调查问卷</a></li> | |
| <li> | |
| <body> | |
| <p>音乐书</p><audio src="se.mp3" controls="controls"></audio> | |
| </body> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- --------------------正文板块-------------------- --> | |
| <div class="content"> | |
| <!-- 设置广告栏 --> | |
| <div class="banner"> | |
| <img src="2.jpg" class="banner_img" /> | |
| </div> | |
| <div class="img_content"> | |
| <ul> | |
| <li> | |
| <a href="#"><img src="1.jpg" class="img_li" /></a> | |
| <div class="info"> | |
| <h3>《骆驼祥子》</h3> | |
| <p> | |
| 书名：骆驼祥子 | |
| </p> | |
| <div class="img_btn"> | |
| <!-- 价格，购买logo --> | |
| <div class="price">¥ 23</div> | |
| <!-- 购物车按钮 --> | |
| <div class="btn"> | |
| <a href="#" class="cart"> | |
| <img src="g.jpg" /> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <a href="#"><img src="1.jpg" class="img_li" /></a> | |
| <div class="info"> | |
| <h3>《狼王梦》</h3> | |
| <p> | |
| 书名：狼王梦 | |
| </p> | |
| <div class="img_btn"> | |
| <!-- 价格，购买logo --> | |
| <div class="price">¥ 48</div> | |
| <!-- 购物车按钮 --> | |
| <div class="btn"> | |
| <a href="#" class="cart"> | |
| <img src="g.jpg" /> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <a href="#"><img src="1.jpg" class="img_li" /></a> | |
| <div class="info"> | |
| <h3>《狼图腾》</h3> | |
| <p> | |
| 书名：狼图腾 | |
| </p> | |
| <div class="img_btn"> | |
| <!-- 价格，购买logo --> | |
| <div class="price">¥ 64</div> | |
| <!-- 购物车按钮 --> | |
| <div class="btn"> | |
| <a href="#" class="cart"> | |
| <img src="g.jpg" /> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <a href="#"><img src="1.jpg" class="img_li" /></a> | |
| <div class="info"> | |
| <h3>《安妮日记》</h3> | |
| <p> | |
| 书名：安妮日记 | |
| </p> | |
| <div class="img_btn"> | |
| <!-- 价格，购买logo --> | |
| <div class="price">¥ 46</div> | |
| <!-- 购物车按钮 --> | |
| <div class="btn"> | |
| <a href="#" class="cart"> | |
| <img src="g.jpg" /> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- 分页 --> | |
| <div class="page_nav"> | |
| <ul> | |
| <li><a href="#">首页</a></li> | |
| <li><a href="#">上一页</a></li> | |
| <li><span class="first_page">1</span></li> | |
| <li><a href="2.html">2</a></li> | |
| <li><a href="#">3</a></li> | |
| <li><a href="#">4</a></li> | |
| <li><a href="#">5</a></li> | |
| <li><a href="#">...</a></li> | |
| <li><a href="#">98</a></li> | |
| <li><a href="#">99</a></li> | |
| } | |
| </script> | |
| </html> | |
3562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
