CSS基础-商城案例

最新推荐文章于 2023-12-25 20:57:39 发布

「已注销」

最新推荐文章于 2023-12-25 20:57:39 发布

阅读量238

点赞数

分类专栏： CSS+html+jquery 文章标签： css

本文链接：https://blog.csdn.net/weixin_45799003/article/details/115918279

版权

本文介绍了构建商城页面的CSS基础，强调了先结构后布局的原则，提倡HTML标签的语义化，并提到了在引用CSS文件时使用相对路径。讨论了reset.css的重要性，以及学习过程中遇到的LESS预处理器。此外，作者还表达了对学习JavaScript的计划以及在实习、毕设和巩固基础知识之间平衡的挑战。

摘要由CSDN通过智能技术生成

1.页面技巧：
先结构后布局；标签语义化；src防止不识别使用./；
2.reset.css有一个写好的CSS
https://meyerweb.com/eric/tools/css/reset/
HTML标签：https://www.w3school.com.cn/tags/tag_s.asp
HTML有一些语义化标签–我是一个也没学会！视频课里面也没看到过！

首先创建如下内容：
base.css是基础样式；index.css是自定义基础样式；reset.css是拷贝的基础样式；style.css是字体图标样式。
引用

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">

base.css

/*版心，观察淘宝的网页，可以学到不少东西*/
.w{
   
    width: 119rem;
    margin: 0 auto;
}

/*水平对齐方式*/
.tl{
   
    text-align: left;
}

.tr{
   
    text-align: right;
}

.tc{
   
    text-align: center;
}

/*页面通用颜色*/
.f60{
   
    color: #f8b62b;
}

/*清除语义化标签的默认样式*/
s,i{
   
    font-style: normal;
    text-decoration: none;
}

6.index.css

/**********通用样式-start**************/

/**********通用样式-end**************/

/**********广告-start**************/
.lk-top-banner {
   
    position: relative;
    background-color: red;
}

.lk-top-banner .top-banner-center {
   
    height: 10rem;
}

.lk-top-banner .top-banner-center img {
   
    height: 10rem;
    width: 100%;
}

.lk-top-banner .banner-close {
   
    position: absolute;
    top: 0.3rem;
    right: 9rem;
    width: 1.9rem;
    height: 1.9rem;
    background: url("./../images/16sucai_201403111752.jpg") 0 0;
}

.lk-top-banner .banner-close:hover {
   
    background-position: 15rem -68rem;
}

/**********广告-end**************/

/**********顶部通栏-start**************/
.lk-toolbar {
   
    background-color: #f5f5f5;
    height: 3.5rem;
    border-bottom: 0.1rem solid #eeeeee;
}

.lk-toolbar > div {
   
    height: 100%;
}

.lk-toolbar > div li {
   
    float: left;
    line-height: 3.5rem;
    padding: 0 2.5rem 0 0.1rem;
    /*定位，子绝父相*/
    position: relative;
}

.lk-toolbar > div li.down i {
    /*li.down如果中间有空格，就会失效*/
    position: absolute;
    right: 1rem;
    to