• html+css实战193-内容-布局

         index.css

    1. /* 放index页面的样式表 */
    2. /* banner */
    3. .banner {
    4.     height: 500px;
    5.     background-color: #f5f5f5;
    6. }
    7.  
    8. .banner .wrapper {
    9.     position: relative;
    10.     height: 500px;
    11.     background-color: pink;
    12. }
    13.  
    14. /* 侧导航 */
    15. .banner .aside {
    16.     position: absolute;
    17.     left: 0;
    18.     top: 0;
    19.     width: 250px;
    20.     height: 500px;
    21.     background-color: rgba(0,0,0,.8);
    22. }
    23.  
    24. .banner .aside li {
    25.     height: 50px;
    26.     line-height: 50px;
    27. }
    28.  
    29. .banner .aside a {
    30.     position: relative;
    31.     /* 宽度和父级一样 */
    32.     padding-left: 36px;
    33.     padding-right: 19px;
    34.     display: block;
    35.     height: 50px;
    36.  
    37.     color: #fff;
    38. }
    39.  
    40. .banner .aside a span {
    41.     margin-left: 15px;
    42.     font-size: 14px;
    43. }
    44.  
    45. .banner .aside a:hover {
    46.     background-color: #27ba9b;
    47. }
    48.  
    49. /* a的里面最后的位置添加箭头 */
    50. .banner .aside a::after {
    51.     position: absolute;
    52.     right: 19px;
    53.     top: 19px;
    54.     content: '';
    55.     width: 6px;
    56.     height: 11px;
    57.     background-image: url(../images/sprites.png);
    58.     background-position: -80px -110px;
    59. }
    60.  
    61. /* 箭头 */
    62. .next,
    63. .prev {
    64.     position: absolute;
    65.     top: 228px;
    66.     width: 45px;
    67.     height: 45px;
    68.     background-color: rgba(0,0,0,.2);
    69.     background-image: url(../images/sprites.png);
    70.     border-radius: 50%;
    71. }
    72.  
    73. /* 背景图位置负责2件事: 改变箭头在盒子里面的位置; 改变精灵图的位置 */
    74. /* 导致在精灵图中测量的尺寸不准确 */
    75. /* 解决方案有2种: 
    76.     1. 书写背景图位置属性, 借助谷歌的调试工具调试具体的位置数值
    77.     2. 书写标签的时候, a负责盒子,里面再添加一个span负责箭头
    78. */
    79. .prev {
    80.     left: 260px;
    81.     background-position: 14px -60px;
    82. }
    83.  
    84. .next {
    85.     right: 10px;
    86.     background-position: -23px -60px;
    87. }
    88.  
    89. /* 圆点 */
    90. .banner ol {
    91.     position: absolute;
    92.     left: 680px;
    93.     bottom: 30px;
    94.  
    95.     height: 10px;
    96. }
    97.  
    98. .banner ol li {
    99.     float: left;
    100.     margin-right: 24px;
    101.     width: 10px;
    102.     height: 10px;
    103.     background-color: rgba(255, 255, 255, 0.4);
    104.     border-radius: 50%;
    105.     cursor: pointer;
    106. }
    107.  
    108. .banner ol .current {
    109.     background-color: #fff;
    110. }
    111.  
    112. /* 新鲜好物 */
    113.  
    114. .goods .hd {
    115.     height: 114px;
    116.     line-height: 114px;
    117. }
    118.  
    119. .goods .hd h2 {
    120.     float: left;
    121.     font-size: 29px;
    122.     font-weight: 400;
    123.  
    124.     height: 114px;
    125. }
    126.  
    127. .goods .hd h2 span {
    128.     margin-left: 34px;
    129.     font-size: 16px;
    130.     color: #999;
    131. }
    132.  
    133. .goods .hd a,
    134. .shengxian .hd .more {
    135.     float: right;
    136.     color: #999;
    137. }
    138.  
    139. .goods .hd a::after,
    140. .shengxian .hd .more::after {
    141.     content: '';
    142.     display: inline-block;
    143.     margin-left: 13px;
    144.     width: 7px;
    145.     
    146.     
    147.     
    148.     
    149.     height: 13px;
    150.     background-image: url(../images/sprites.png);
    151.     background-position: 0 -110px;
    152.     vertical-align: middle;
    153. }
    154.  
    155. .goods .bd li {
    156.     position: relative;
    157.     float: left;
    158.     margin-right: 8px;
    159.     width: 304px;
    160.     height: 405px;
    161.     background-color: #f0f9f4;
    162.     text-align: center;
    163. }
    164.  
    165. .goods .bd li:last-child {
    166.     margin-right: 0;
    167. }
    168.  
    169. .goods .bd li img {
    170.     width: 304px;
    171. }
    172.  
    173. .goods .bd li h3 {
    174.     margin-top: 20px;
    175.     margin-bottom: 10px;
    176.     font-size: 20px;
    177.     font-weight: 400;
    178. }
    179.  
    180. .goods .bd li div {
    181.     color: #9a2e1f;
    182.     font-size: 17px;
    183. }
    184.  
    185. .goods .bd li div span {
    186.     font-size: 23px;
    187. }
    188.  
    189. .goods .bd li b {
    190.     position: absolute;
    191.     left: 17px;
    192.     top:18px;
    193.     width: 28px;
    194.     height: 51px;
    195.     border: 1px solid #27ba9b;
    196.     border-radius: 2px;
    197.     font-size: 18px;
    198.     color: #27ba9b;
    199.     font-weight: 400;
    200.     line-height: 24px;
    201. }
    202.  
    203. /* 生鲜 */
    204. .shengxian .hd {
    205.     height: 96px;
    206.     line-height: 96px;
    207. }
    208.  
    209. .shengxian .hd h2 {
    210.     float: left;
    211.     font-size: 29px;
    212.     font-weight: 400;
    213. }
    214.  
    215. .shengxian .hd .more {
    216.     float: right;
    217. }
    218.  
    219. .shengxian .hd ul {
    220.     float: right;
    221.     margin-right: 65px;
    222. }
    223.  
    224. .shengxian .hd ul li {
    225.     float: left;
    226. }
    227.  
    228. .shengxian .hd li a {
    229.     padding: 2px 7px;
    230.     margin-left: 6px;
    231. }
    232.  
    233. .shengxian .hd li a:hover {
    234.     background-color: #27ba9b;
    235.     color: #fff;
    236. }
    237.  
    238. .shengxian .bd .left {
    239.     float: left;
    240.     width: 240px;
    241.     height: 610px;
    242.     background-color: pink;
    243. }
    244.  
    245. .shengxian .bd .right {
    246.     float: left;
    247.     width: 1000px;
    248.     height: 610px;
    249.     background-color: skyblue;
    250. }

    运行结果

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>项目代码准备</title>
    8.     <!-- 外链式样式表的生成 -->
    9.     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    10.     <link rel="stylesheet" href="./css/base.css">
    11.     <link rel="stylesheet" href="./css/common.css">
    12.     <link rel="stylesheet" href="./css/index.css">
    13. </head>
    14. <body>
    15.         <!-- 快捷导航 -->
    16.         <div class="shortcut">
    17.             <div class="wrapper">
    18.                 <ul>
    19.                     <li><a href="#">请先登录</a></li>
    20.                     <li><a href="#">免费注册</a></li>
    21.                     <li><a href="#">我的订单</a></li>
    22.                     <li><a href="#">会员中心</a></li>
    23.                     <li><a href="#">帮助中心</a></li>
    24.                     <li><a href="#">在线客服</a></li>
    25.                     <li><a href="#"><span></span>手机版</a></li>
    26.                 </ul>
    27.             </div>
    28.         </div>
    29.  
    30.         <div class="header wrapper">
    31.             <div class="logo">
    32.                 <h1><a href="#">小兔鲜儿</a></h1>
    33.             </div>
    34.             <div class="nav">
    35.                 <ul>
    36.                     <li><a href="#">首页</a></li>
    37.                     <li><a href="#">生鲜</a></li>
    38.                     <li><a href="#">美食</a></li>
    39.                     <li><a href="#">餐厨</a></li>
    40.                     <li><a href="#">电器</a></li>
    41.                     <li><a href="#">居家</a></li>
    42.                     <li><a href="#">洗护</a></li>
    43.                     <li><a href="#">孕婴</a></li>
    44.                     <li><a href="#">服装</a></li>
    45.                 </ul>
    46.             </div>
    47.             <div class="search">
    48.                 <input type="text" placeholder="搜一搜">
    49.                 <!-- 定位 放大镜 -->
    50.                 <span></span>
    51.             </div>
    52.             <div class="car">
    53.                 <span>2</span>
    54.             </div>
    55.         </div>
    56.  <!-- banner -->
    57.  <div class="banner">
    58.     <div class="wrapper">
    59.         <!-- 有多少个图,就有都少个li -->
    60.         <ul>
    61.             <li>
    62.                 <a href="#"><img src="./uploads/banner_1.png" alt=""></a>
    63.             </li>
    64.         </ul>
    65.  
    66.         <!-- 侧导航 -->
    67.         <div class="aside">
    68.             <ul>
    69.                 <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
    70.                 <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
    71.                 <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
    72.                 <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
    73.                 <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
    74.                 <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
    75.                 <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
    76.                 <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
    77.                 <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
    78.                 <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
    79.             </ul>
    80.         </div>
    81.  
    82.         <!-- 箭头 -->
    83.         <!-- prev: 上一个 -->
    84.         <a href="#" class="prev"></a>
    85.         <!-- next : 下一个 -->
    86.         <a href="#" class="next"></a>
    87.  
    88.         <!-- 圆点: 当前状态: current / active -->
    89.         <!-- js 找到用户点击的li 添加类名 li变成白色的 -->
    90.         <ol>
    91.             <li></li>
    92.             <li></li>
    93.             <li class="current"></li>
    94.             <li></li>
    95.             <li></li>
    96.         </ol>
    97.     </div>
    98. </div>
    99.  
    100.   <!-- 新鲜好物 -->
    101.   <div class="goods wrapper">
    102.     <!-- hd header 头部 -->
    103.     <div class="hd">
    104.         <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
    105.         <a href="#">查看全部</a>
    106.     </div>
    107.     <!-- body 身体, 内容 -->
    108.     <div class="bd clearfix">
    109.         <ul>
    110.             <li>
    111.                 <a href="#">
    112.                     <img src="./uploads/new_goods_1.jpg" alt="">
    113.                     <h3>睿米无线吸尘器F8</h3>
    114.                     <div>￥<span>899</span></div>
    115.                     <b>新品</b>
    116.                 </a>
    117.             </li>
    118.             <li>
    119.                 <a href="#">
    120.                     <img src="./uploads/new_goods_1.jpg" alt="">
    121.                     <h3>睿米无线吸尘器F8</h3>
    122.                     <div>￥<span>899</span></div>
    123.                     <b>新品</b>
    124.                 </a>
    125.             </li>
    126.             <li>
    127.                 <a href="#">
    128.                     <img src="./uploads/new_goods_1.jpg" alt="">
    129.                     <h3>睿米无线吸尘器F8</h3>
    130.                     <div>￥<span>899</span></div>
    131.                 </a>
    132.             </li>
    133.             <li>
    134.                 <a href="#">
    135.                     <img src="./uploads/new_goods_1.jpg" alt="">
    136.                     <h3>睿米无线吸尘器F8</h3>
    137.                     <div>￥<span>899</span></div>
    138.                 </a>
    139.             </li>
    140.  
    141.         </ul>
    142.     </div>
    143. </div>
    144.         <!-- 版权区域 -->
    145.     <div class="footer">
    146.         <div class="wrapper">
    147.             <div class="top">
    148.                 <ul>
    149.                     <li>
    150.                         <!-- 通过伪元素添加标签实现精灵图 -->
    151.                         <span>价格亲民</span>
    152.                     </li>
    153.                     <li>
    154.                         <span>物流快捷</span>
    155.                     </li>
    156.                     <li>
    157.                         <span>品质新鲜</span>
    158.                     </li>
    159.                 </ul>
    160.             </div>
    161.             <div class="bottom">
    162.                 <p>
    163.                     <a href="#">关于我们</a> |
    164.                     <a href="#">帮助中心</a> |
    165.                     <a href="#">售后服务</a> |
    166.                     <a href="#">配送与验收</a> |
    167.                     <a href="#">商务合作</a> |
    168.                     <a href="#">搜索推荐</a> |
    169.                     <a href="#">友情链接</a>
    170.                 </p>
    171.                 <p>CopyRight @ 小兔鲜儿</p>
    172.             </div>
    173.         </div>
    174.     </div>
    175. </body>
    176. </html>

    运行结果

  • 相关阅读:
    failed (13: Permission denied) while reading upstream解决方法
    Flutter组件--AppBar相关属性
    拥抱变革：了解汽车制造商正在采用的组合式业务的‘四大原则’
    基于PHP+MySQL企业网站的设计与开发
    花 30 美金请 AI 画家弄了个 logo，网友：画得非常好，下次别画了！
    基于Java毕业设计音乐视频分享网站源码+系统+mysql+lw文档+部署软件
    数据结构第二课 -----线性表之顺序表
    金仓数据库KingbaseES客户端应用参考手册--11. sys_dump
    程序员日均写7行代码被开除，这个行业真的还是普通人的最优选吗
    C语言tips-字符串处理函数及其实现
  • 原文地址：https://blog.csdn.net/qq_41632427/article/details/125556071