Day 9 淘宝静态页面练习 reset.css样式重置头部信息结构及样式自定义图标的样式

最新推荐文章于 2025-02-11 13:22:58 发布

Crimson418

最新推荐文章于 2025-02-11 13:22:58 发布

阅读量880

点赞数

CC 4.0 BY-SA版权

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_70432149/article/details/126337602

本文以淘宝页面为例，介绍如何使用reset.css进行样式重置，强调了reset.css在消除浏览器默认样式中的作用。同时，讨论了头部信息的结构设计，包括id和class的选择原则，并探讨了样式模块化的实现，如使用@规则进行css文件导入和媒体查询。此外，还讲解了自定义图标的方法，包括font-family和不同字体格式的使用，以及优化字体渲染的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

reset.css 用来做样式重置，需放在一个单独的css文件中

images 放所有的图片

以淘宝页面为例：

一、划分结构

经验:自上而下，从左往右

考虑：内容、颜色块、间距、边框

大结构：头部信息

-------扩展-----

id和class的选择，根据个人经验和选择使用，独立的层可以用id，通用层可以用class

需要与js交互时，可以用id。唯一的内容也可以用id。

----------------

二、样式重置及样式模块化

reset.css用来将不需要的样式重置,标签身上有的样式才重置

img的border在IE浏览器中会显示，谷歌和火狐中没有

通过模块化添加reset.css:

@规则：（css语法的一种，使css功能强大）

@charset 设置样式表的编码

@import 导入其它样式文件 @import 'reset.css'

@meida 媒体查询（在移动端开发中做适配）

@font-face 自定义字体（用户下载字体）

自定义图标的本质是文字，在iconfont可选

语法：font-family:'iconfont'

src: url("../font/iconfont.ttf") format("truetype");

woff 网页字体，尺寸小加载快，优先使用

eot 只针对IE浏览器

ttf 字体的文件大，IE9以上支持，其他浏览器都支持

svg 图形技术，可以修改大小颜色且不会失真，IE9以上支持，其他浏览器都支持

format 可选参数让浏览器提前知道字体格式

-----------

-webkit-font-smoothing:antialiased; 针对webkit内核定义

-moz-osx-font-smoothing:grayscale; 针对火狐定义

让字体进行抗锯齿的渲染，让字体看起来更清晰舒服

-----------

头部信息reset.css样式重置文件：

body,p,h1,h2,h3,h4{
    margin: 0;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
img{
    border: none;
    vertical-align: middle;
    /* 设置图片和文字在垂直方向对齐 */
}
a{
    text-decoration: none;
    /* 下划线去掉 */
    color: #3c3c3c;
    /* 淘宝的灰色 */
}
i{
    font-style: normal;
    /* i标签:仅仅为了让字体显示斜体
       em标签：不仅可以使字体显示斜体，而且可以加强语气，告诉搜索引擎这里是重要的 */
} 
input{
    margin: 0;
    padding: 0;
    /* 不知标签本身带的属性，可以从控制台的computed中查找 */
}
button{
    outline: none;
    /* outline表单会有蓝色框，是获取焦点的一种表现形式 */
}
body{
    font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
    /* font是复合属性，字体大小/行高1.5  body  */
    /* 行高的值：除了px，其他单位都是拿自己的值与相应的font-size的大小进行相乘。
                大部分用数字，使用数字，子元素会继承line-height这个值，其他方式继承的是计算后的值
                line-height:normal;  字体不同，默认不同，微软雅黑默认为1.32，宋体大概在1.41
                line-height:1.5；
                line-height:200%；
                line-height:50px；只有px是固定值，绝对单位
                line-height:5em；
      例如：p标签的默认字体大小为16px，如果line-height:1.5;  那么就是16×1.5=24px
      
      '\5b8b\4f53'代表宋体，font-family:'宋体';
                            font-family:'\5b8b\4f53';
                            font-family:'SimSun'; 
                  微软雅黑：font-family:'微软雅黑';
                            font-family:'Miscrosoft YaHe';
      unicode编码，是万国码，（任何一个语言中的任何一个字符都设定了
      一个唯一的二进制编码，不会重复，跨平台跨语言）
      百度插件，FeHelper，可对unicode编码加密解密 
      */
      color:#3c3c3c ;
      background-color: #f4f4f4;
}   
.clearfix:after{
    content: 
    display:block;
    clear:both;
}
.fl{
    float: left;
}
.fr{
    float:right;
}
 /* 预定义 */
.leayer{
    width: 1190px;
    margin:0 auto; 
}
.c4{
    color: #f40;
}
.c5{
    color: #f50;
}
.mr7{
    margin-right: 7px;
}
.mt10{
    margin-top: 10px;
}
.mr10{
    margin-right: 10px;
}
.mr5{
    margin-right: 5px;
}

头部信息index.css：

@import "reset.css";
@font-face {
  font-family: "iconfont";
  src: url("../font/iconfont.ttf") format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 头部信息 */
#headmessage li {
  float: left;
  line-height: 35px;
  /* 如果有psd图中，可以量出 */
  padding: 0 6px;
  font-size: 0;
}
#headmessage a {
  color: #6c6c6c;
  font-size: 12px;
}
#headmessage a:hover {
  color: #f40;
}
#headmessage a.login {
  color: #f22e00;
}
#headmessage span {
  font-size: 12px;
}
#headmessage span.arrow {
  margin-left: 7px;
}
#headmessage li strong {
  font-size: 12px;
  color: #f22e00;
}
#headmessage li span.store {
  color: #9c9c9c;
}
#headmessage li.line {
  font-size: 12px;
  color: #ddd;
  padding: 0 5px;
}

头部信息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>淘宝网 - 淘！我喜欢</title>
    <link rel="stylesheet" href="../css/index.css" />
    <link rel="icon" href="favicon.ico" />
    <base target="_blank" />
    <!-- base用于定义基础url  href和target只能设置一个 设置新页面base targe="_blank"-->
  </head>
  <body>
    <!-- url图标 
        .ico格式  还是一张图片  可以将jpg等格式转成ico格式
        图标位置：ico一定要放在网站的根目录中，在link标签中的rel="icon" href="favicon.ico"-->

    <!-- 头部信息 -->
    <div id="headmessage" class="clearfix">
      <ul class="fl">
        <li>
          <span>中国大陆</span>
          <span class="iconfont arrow">&#xe62b;</span>
        </li>
        <li class="mr7">
          <a href="#" class="login mr7">亲，请登录</a>
          <a href="#">免费注册</a>
        </li>
        <li>
          <a href="#">手机逛淘宝</a>
        </li>
      </ul>
      <ul class="fr">
        <li>
          <a href="#">我的淘宝</a>
          <span class="iconfont arrow">&#xe62b;</span>
        </li>
        <li>
          <span class="iconfont mr5 c4">&#xe613;</span>
          <a href="#">购物车</a>
          <strong>0</strong>
          <span class="iconfont arrow">&#xe62b;</span>
        </li>
        <li>
          <a href="#">
            <span class="iconfont mr5 store">&#xe61d; </span>收藏夹
          </a>
          <span class="iconfont arrow">&#xe62b;</span>
        </li>
        <li>
          <a href="#">商品分类</a>
        </li>
        <li class="line">|</li>
        <li>
          <a href="#">千牛卖家中心</a>
          <span class="iconfont arrow">&#xe62b;</span>
        </li>
        <li>
          <a href="#">联系客服</a>
          <span class="iconfont arrow">&#xe62b;</span>
        </li>
        <li>
          <span class="iconfont c4 mr5">&#xe790;</span>
          <a href="#">网站导航</a>
          <span class="iconfont arrow">&#xe62b;</span>
        </li>
      </ul>
    </div>
    <!--头部广告  -->
    <div id="headAd"></div>
    <!-- 头部搜索 -->
    <div id="headSearch"></div>
    <!-- 首屏内容 -->
    <div id="firstScreen"></div>
  </body>
</html>