常用css布局

XYR121212

已于 2024-04-09 22:02:27 修改

阅读量1.6k

点赞数 36

文章标签： css 前端

于 2024-04-09 21:48:49 首次发布

本文链接：https://blog.csdn.net/weixin_45691995/article/details/137568055

版权

1.favicon图标

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。

制作favicon图标

把品优购图标切成 png 图片
把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：http://www.bitbug.net/

使用favicon图标

favicon图标放到网站根目录下

请添加图片描述

HTML页面引入favicon图标

在html 页面里面的 <head> </head>元素之间引入代码

 <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>

2.TDK三大标签SEO优化（★★）

SEO是什么

SEO（Search Engine Optimization汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。

SEO 的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。

页面必须有三个标签用来符合 SEO 优化

请添加图片描述

TDK是什么

T – Title（网站标题）

title 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

建议网站名（产品名）- 网站的介绍（尽量不要超过30个汉字）

例如：

京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
小米商城 - 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

D – description（网站描述）

简要说明我们网站主要是做什么的。

我们提倡，description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。

例如：

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />

K – keywords （关键字）

keywords 是页面关键词，是搜索引擎的关注点之一。

keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2 的形式

例如：

<meta name= " keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备

示例代码

<head>
    ...
    <title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
    </title>
    <!-- 网站说明 -->
    <meta name="description"
        content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <!-- 关键字 -->
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
    ...
</head>

3.logo 定位

在这里插入图片描述

1号盒子是 logo 标志定位，在正常开发过程中， logo 的布局其实是有讲究的，需要进行 logoSEO的优化
logo 里面首先放一个 h1 标签，目的是为了提权，告诉搜索引擎，这个地方很重要
h1 里面再放一个链接，可以返回首页的，把 logo 的背景图片给链接即可
为了搜索引擎收录我们，我们链接里面要放文字（网站名称），但是文字不要显示出来
- 方法1：text-indent 移到盒子外面（text-indent: -9999px) ，然后 overflow:hidden ，淘宝的做法
- 方法2：直接给 font-size: 0; 就看不到文字了，京东的做法
最后给链接一个 title 属性，这样鼠标放到 logo 上就可以看到提示文字了

<!--结构代码-->
<div class="logo">
      <h1>
          <a href="index.html" title="品优购商城">品优购商城</a>
      </h1>
  </div>

  /* header 头部制作 */
  .header {
      position: relative;
      height: 105px;
   
  }
  .logo {
      position: absolute;
      top: 25px;
      width: 171px;
      height: 61px;
      
  }
  .logo a {
      display: block;
      width: 171px;
      height: 61px;
      background: url(../images/logo.png) no-repeat;
      /* font-size: 0;京东的做法*/
      /* 淘宝的做法让文字隐藏 */
      text-indent: -9999px;
      overflow: hidden;
  }

4.购物车模块

在这里插入图片描述

4 号盒子是 shopcar 购物车模块
在shopcar里面添加一个before伪元素和after伪元素，分别放置购物车的图标和右箭头
count 统计部分用绝对定位做
count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度
一定注意左下角不是圆角，其余三个是圆角写法： border-radius: 7px 7px 7px 0;

<!-- 购物车模块 -->
  <div class="shopcar">
      我的购物车
      <i class="count">8</i>
  </div>

  .shopcar {
      position: absolute;
      right: 60px;
      top: 25px;
      width: 140px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      border: 1px solid #dfdfdf;
      background-color: #f7f7f7;
  }
  .shopcar::before {
      content: '\e93a';
      font-family: 'icomoon';
      margin-right: 5px;
      color: #b1191a;
  }
  .shopcar::after {
      content: '\e920';
      font-family: 'icomoon';
      margin-left: 10px;
  }
  .count {
      position: absolute;
      top: -5px;
      left: 105px;
      height: 14px;
      line-height: 14px;
      color: #fff;
      background-color: #e60012;
      padding: 0 5px;
      border-radius: 7px 7px 7px 0;
  }

5.网格排列

在这里插入图片描述

2 号盒子为 lifeservice 生活服务模块高度为 209px
- 设置边框（左右下边框）
里面的内容是 ul > 12*li，给li设置宽 63px，高71px，设置右边和下边的边框，设置浮动
这样设置后，第四个li会装不开，掉下来，解决办法如下
- lifeservice 盒子宽度为 250 ，但是装不开里面的 4 个小 li
- 可以让 lifeservice 里面的 ul 宽度为 252，就可以装的下 4 个小 li
- lifeservice 盒子 overflow 隐藏多余的部分就可以了
在 li 里面放一个 i（里面放图标），下面的文本用 p 标签包裹
给 i 设置 24px宽和28px的高（注意 i 是行内元素，转成行内块），给 li 设置 text-align:center 让里面内容居中显示

<div class="lifeservice">
    <ul>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
        <li>
            <i></i>
            <p>话费</p>
        </li>
    </ul>
</div>

.lifeservice {
    overflow: hidden;
    height: 209px;
    /* background-color: purple; */
    border: 1px solid #e4e4e4;
    border-top: 0;
}
.lifeservice ul {
    width: 252px;
}
.lifeservice ul li {
    float: left;
    width: 63px;
    height: 71px;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    text-align: center;
}
.lifeservice ul li i {
    display: inline-block;
    width: 24px;
    height: 28px;
    background-color: pink;
    margin-top: 12px;
    background: url(../images/icons.png) no-repeat -19px -15px;
}

6.商品排列

请添加图片描述

1 号盒子 sk_container 给宽度 1200，不要给高度
3 号盒子 sk_bd ，里面包含很多的 ul 和 li
当鼠标移入到 li 上面的时候显示红色的边框，在这里先给 li 设置透明的边框，当鼠标移入的时候设置为红色即可
由于给每个 li 都设置了外边距，导致一行的最后一个 li 掉了下来，在这里我们利用 nth-child(4n) 来选择出来每一行最后一个 li，去掉外边距就好了

<div class="sk_bd">
     <ul class="clearfix">
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
        <li>
            <img src="upload/list.jpg" alt="">
        </li>
    </ul>
</div>

.sk_bd ul li {
    overflow: hidden;
    float: left;
    margin-right: 13px;
    width: 290px;
    height: 460px;
    border: 1px solid transparent;
}
.sk_bd ul li:nth-child(4n) {
    margin-right: 0;
}
.sk_bd ul li:hover {
    border: 1px solid #c81523;
}

7.注册页面

在这里插入图片描述

先用一个盒子，把整个内容包裹起来，设置盒子宽度（600px），让这个盒子距上边50px，水平居中显示
里面的内容利用 ul 包含 li 来实现的（不需要用表格）
每个 li 里面，左侧放 label 标签，中间放input 标签，右侧放 span 提示信息
左侧 label里面的文字都是右对齐，我们可以给label设置一个宽度（88px），然后利用text-align 来设置右对齐
input 表单设置宽度 242px，高度 37px，设置边框
右侧 span修饰一下文字颜色
提示信息的样式优化
- 定义一个错误的样式，定义一个正确的样式，然后给对应的盒子设置类名
- 在span里面放一个小盒子，这个小盒子用来显示图标的，设置一下宽高（20x20）
- 插入图片了之后，默认与文字是基线对齐，通过 vertical-algin 来设置图片与文字对齐方式
安装程度的布局，在第4个小 li 里面放三个盒子，分别放弱、中、强
- 设置 em 的左右 12px 的内边距，设置一下文字颜色
- 分别设置背景颜色
同意协议和完成注册都是用 li 进行包裹

<div class="reg_form">
    <form action="">
        <ul>
            <li><label for="">手机号：</label> <input type="text" class="inp">
                <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li>
            <li><label for="">短信验证码：</label> <input type="text" class="inp">
                <span class="success"> <i class="success_icon"></i> 短信验证码输入正确 </span></li>
            <li><label for="">登录密码：</label> <input type="password" class="inp">
                <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li>
            <li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em> </li>
            <li><label for="">确认密码：</label> <input type="password" class="inp">
                <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li>
            <li class="agree"><input type="checkbox" name="" id=""> 
                同意协议并注册 <a href="#">《知晓用户协议》</a>
            </li>
            <li>
                <input type="submit" value="完成注册" class="btn">
            </li>
        </ul>
    </form>
</div>

.reg_form {
    width: 600px;

    margin: 50px auto 0;
}
.reg_form ul li {
    margin-bottom: 20px;
}
.reg_form ul li label {
    display: inline-block;
    width: 88px;
    text-align: right;
}
.reg_form ul li .inp {
    width: 242px;
    height: 37px;
    border: 1px solid #ccc;
}
.error {
    color: #c81523;
}
.error_icon,
.success_icon {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url(../images/error.png) no-repeat;
    margin-top: -2px;
}
.success {
    color: green;
}
.success_icon {
    background: url(../images/success.png) no-repeat;
}
.safe {
    padding-left: 170px;
}
.safe em {
    padding: 0 12px;
    color: #fff;
}
.ruo {
    background-color: #de1111;
}
.zhong {
    background-color: #40b83f;
}

.qiang {
    background-color: #f79100;
}
.agree {
    padding-left: 95px;
}
.agree input {
    vertical-align: middle;
}
.agree a {
    color: #1ba1e6;
}
.btn {
    width: 200px;
    height: 34px;
    background-color: #c81623;
    font-size: 14px;
    color: #fff;
    margin: 30px 0 0 70px;
}

8.导航栏

在这里插入图片描述

盒子左侧浮动，dropdown ，根据相关性里面包含 .dt 和 .dd 两个盒子
.dt 内容是全部商品分类，然后把这个盒子的宽高设置跟父亲一样，这样就把 .dd 挤到下面去了
给 .dd 盒子设置宽度和高度，以及背景颜色
给 .dd 盒子里面定义无序列表（ul > li > a）
每个 li 都有一个高度（31px），宽度可以不用设置，让文字垂直居中，左边设置2个像素的margin值
给 li 里面的a设置文字大小（14px）
给 li 设置 hover，当鼠标移入的时候，让li的背景变成白色，让里面的文字变成红色
li 右侧的三角就可以利用伪元素来实现，给伪元素设置字体图标，利用定位的方式放在li的右侧，那么给li设置相对定位

<div class="dropdown">
     <div class="dt">全部商品分类</div>
     <div class="dd">
         <ul>
             <li><a href="#">家用电器</a> </li>
             <li><a href="#">手机</a>、 <a href="#">数码</a>、<a href="#">通信</a> </li>
             <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>
             <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>
             <li><a href="#">图书、音像、电子书</a> </li>
             <li><a href="#">彩票、旅行、充值、票务</a> </li>
             <li><a href="#">理财、众筹、白条、保险</a> </li>
         </ul>
     </div>
 </div>

.dropdown .dt {
    width: 100%;
    height: 100%;
    color: #fff;
    text-align: center;
    line-height: 45px;
    font-size: 16px;
}
.dropdown .dd {
    display: none;
    width: 210px;
    height: 465px;
    background-color: #c81623;
    margin-top: 2px;
}
.dropdown .dd ul li {
    position: relative;
    height: 31px;
    line-height: 31px;
    margin-left: 2px;
    padding-left: 10px;
}
.dropdown .dd ul li:hover {
   background-color: #fff;
}
.dropdown .dd ul li::after {
    position: absolute;
    top: 1px;
    right: 10px;
    color: #fff;
    font-family: 'icomoon';
    content: '\e920';
    font-size: 14px;
}
.dropdown .dd ul li a {
    font-size: 14px;
    color: #fff;
}
.dropdown .dd ul li:hover a {
    color: #c81623;
}

XYR121212

关注

36
点赞
踩
49

收藏

觉得还不错? 一键收藏
1
评论
常用css布局

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。，description 作为网站的总体业务和主题概括，多采用“我们是…”、“×××网作为…的目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。上面的时候显示红色的边框，在这里先给。
复制链接

扫一扫