CSS网页案例-黑马

已于 2024-03-18 10:07:42 修改
阅读量430 收藏 10
点赞数 11
分类专栏： web 文章标签： css 前端
于 2024-03-14 23:08:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_73701759/article/details/136724596
版权

项目目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目目录</title>
</head>
<body>
    <ul>
        <li>xtx-pc
            <ul>
                <li>images 文件夹: 存放固定使用的图片素材，例如: logo样式修饰图等等</li>
                <li>uploads 文件夹:存放非固定使用的图片素材，例如:商品图、宣传图需要上传的图片</li>
                <li>iconfont 文件夹:字体图标素材</li>
                <li>css 文件夹:存放CSS文件 (link 标签引入)
                    <ul>
                        <li>base.css:基础公共样式</li>
                        <li>common.css:各个网页相同模块的重复样式，例如:头部、底部</li>
                        <li>index.css:首页 CSS 样式</li>
                    </ul>
                </li>
                <li>index.html:首页HTML文件</li>
            </ul>
        </li>
    </ul>
</body>
</html>

SEO三大标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SEO三大标签</title>  
</head>
<body>
    <h3>SEO三大标签</h3>
    <strong>SEO: 搜索引擎优化，</strong>提升网站百度搜索排名 <br>
    提升SEO常见方法 <br>
    <ul>
        <li>竞价排名</li>
        <li>将网页制作成html后缀</li>
        <li>标签语义化（在合适的地方使用合适的标签）</li>
    </ul>
    网页头部SEO标签：
    <ul>
        <li>title:网页标题标签</li>
        <li>description: 网页描述</li>
        <li>keywords:网页关键词</li>
    </ul>
    
</body>
</html>

Favicon图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Favicon图标</title>
</head>
<body>
    <h3>Favicon图标</h3>
    <strong>Favicon图标</strong>   <br>
    Favicon 图标:网页图标，出现在浏览器标题栏增加网站辨识度。 <br>
    图标: favicon.ico，一般存放到网站的根目录里面 <br>
    <img src="./img/Favicon图标.png" alt="">
</body>
</html>

版心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>版心</title>
</head>
<body>
    <h3>版心</h3>
    wrapper 版心宽度： 1240px <br>
</body>
</html>

快捷导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快捷导航（shortcut）</title>
</head>
<body>
    <h3>快捷导航（shortcut）</h3>
    <strong>结构 > 版心 > 导航ul </strong> <br>
</body>
</html>

案例

base

/* 去除常见标签默认的 margin 和 padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* 设置网页统一的字体大小、行高、字体系列相关属性 */
  body {
    font: 16px/1.5  "Microsoft Yahei",
      "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    color: #333;
  }
  
  /* 去除列表默认样式 */
  ul,
  ol {
    list-style: none;
  }
  
  /* 去除默认的倾斜效果 */
  em,
  i {
    font-style: normal;
  }
  
  /* 去除a标签默认下划线，并设置默认文字颜色 */
  a {
    text-decoration: none;
    color: #333;
  }
  
  /* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
  img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
  }
  
  /* 去除input默认样式 */
  input {
    border: none;
    outline: none;
    color: #333;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 400;
  }

common

/* 头尾各个页面相同的样式 */
/* 版心 */
.wrapper  {
    margin: 0 auto;
    width: 1240px;
}

/* 快捷导航 */
.shortcut {
    height: 52px;
    background-color: #333;
}
.shortcut .wrapper {
    display: flex;
    justify-content: flex-end;
    height: 52px;
    /* background-color: pink; */
}
.shortcut .wrapper ul {
    display: flex;
    line-height: 52px;
}
.shortcut .wrapper li a {
    padding: 0 15px;
    font-size: 14px;
    color: #fff;
    border-right: 1px solid #999;
}
.shortcut .wrapper li:last-child a {
    border-right: 0;
} 
.shortcut li .iconfont {
    margin-right: 4px;
    vertical-align: middle;
}

/* 头部 */
.header {
    height: 88px;
    /* background-color: pink; */
    margin-top: 22px;
    margin-bottom: 22px;
    display: flex;
}
.header .logo {
    width: 200px;
    height: 88px;
    margin-right: 40px;
}
.logo a {
    display: block;
    width: 200px;
    height: 88px;
    background-image: url(../images/logo.png);
    font-size: 0;
}
.header .nav {
    margin-top: 33px;
    margin-right: 28px;
}
.nav ul {
    display: flex;
}
.nav li {
    margin-right: 47px;
}
.nav li a {
    padding-bottom: 10px;
    /* background-color: skyblue; */
}
.nav li a:hover {
    border-bottom: 2px solid #5EB69C;
    color: #5EB69C;
}
.header .search {
    margin-top: 33px;
    margin-right: 45px;
    height: 34px;
    width: 170px;
    border-bottom: 2px solid #f4f4f4;
}
.header .search {
display: flex;
}
.header .search .iconfont {
    margin-right: 8px;
    font-size: 18px;
    color: #ccc;
}
.search input {
    /* 淘觉器优先生效 input 标签的默认宽度。所以 flex: 1 不生效 */
    /* 解决办法:而置 input 默认宽度 width: */
    flex: 1;
    width: 0;

}
.search input::placeholder {
    font-size: 16px;
    color: #ccc;
}
.cart {
    position: relative;
    margin-top: 32px;
}
.cart .iconfont {
    font-size: 24px;
}
.cart i {
    position: absolute;
    top: 1px;
    /* right 右对齐向左撑开，，left 向右撑开 */
    left: 15px;
    height: 15px;
    padding-right: 6px;
    padding-left: 6px;
    background-color: rgb(255, 94, 0);
    border-radius: 5px;
    line-height: 15px;
    font-size: 14px;
    color: #f4f4f4;
}
/* 底部 */
.footer {
    height: 580px;
    background-color: #f5f5f5;
}
/* 服务 */
.service {
    padding: 60px 0;
    height: 178px;
    border-bottom: 1px solid #E8E8E8;
}
.service ul {
    display: flex;
    justify-content: space-evenly;
}
.service li {
    display: flex;
    width: 190px;
    height: 58px;
    /* background-color: pink; */
}
.service li h5 {
    margin-right: 20px;
    width: 58px;
    height: 58px;
    background-image: url(../images/sprite.png);
}
.service li:nth-child(2) h5 {
    background-position: 0 -58px;
}
.service li:nth-child(3) h5 {
    background-position: 0 -116px;
}
.service li:nth-child(4) h5 {
    background-position: 0 -174px;
}
.service li p {
    font-size: 28px;
    line-height: 58px;
}
/* 帮助中心 */
.help {
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    height: 300px;
}
.help .left {
    display: flex;
}
.help .left dl {
    margin-right: 84px;
}
.help .left dl:last-child {
    margin-right: 0;
}
.help .left dt {
    margin-bottom: 30px;
    font-size: 18px;
}
.help .left dd {
    margin-bottom: 10px;
}
.help .left dd a {
    color: #969696;
}
.help .left .iconfont {
    color: #5EB69C;
}

.help .right ul {
    display: flex;
}
.help .right li:first-child {
    margin-right: 55px;
}
.help .right .pic {
    margin-bottom: 10px;
    width: 120px;
    height: 120px;
}
.help .right p {
    color: #969696;
    text-align: center;
}

.coopright {
    text-align: center;
    margin-bottom: 40px;
}
.coopright p {
    margin-bottom: 10px;
    color: #A1A1A1;
}
.coopright p a {
    color: #A1A1A1;
    margin: 0 10px;
}

index

/* banner */
.banner {
    height: 500px;
    background-color: #f5f5f5;
}
.banner .wrapper {
    height: 500px;
    background-color: pink;
    overflow: hidden;
    position: relative;
}
.banner .wrapper .pic {
    display: flex;
    /* flex布局，父级宽度不够，增大父级尺寸 */
    width: 3720px;
}
/* 侧导航 */
.subnav {
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.42);
}
.subnav li {
    display: flex;
    justify-content: space-between;
    height: 50px;
    /* background-color: pink; */
    line-height: 50px;
    padding-left: 30px;
    padding-right: 12px;
    color: #fff;
    cursor: pointer;
}
.subnav li a {
    font-size: 14px;
    margin-right: 14px;
    color: #fff;
}
.subnav li .classify {
    font-size: 16px;
    margin-right: 14px;
}
.subnav li .iconfont {
    font-size: 14px;
}
.subnav li:hover {
    background-color: #00eb9a;
}
/* 原点解释器 */
.banner ol {
    display: flex;
    position: absolute;
    bottom: 17px;
    right: 16px;
}
.banner ol li {
    width: 22px;
    height: 22px;
    /* background-color: pink; */
    border-radius: 50%;
    margin-left: 8px;
}
.banner ol i {
    margin: 4px;
    display: block;
    width: 14px;
    height: 14px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
}
.banner ol .activate{
    background-color: rgba(255, 255, 255, 0.5);
}
.banner ol .activate i {
    background-color: #fff;
}
.title {
    height: 42px;
    margin-top: 40px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
}
.title .left {
    display: flex;
}
.title .left h3 {
    font-size: 30px;
    margin-right: 35px;
}
.title .left p {
    align-self: flex-end;
    color: #a1a1a1;
}
.title .right a {
    line-height: 42px;
    color: #a1a1a1;
}
.title .right .iconfont {
    margin-left: 10px;
}
.bd ul {
    justify-content: space-between;
    display: flex;
}
.bd ul li {
    background-color: #EEF9F4;
    width: 304px;
    height: 404px;
}
.bd li .pic {
    width: 304px;
    height: 304px;
}
.bd li .txt {
    text-align: center;
}
.bd li .txt h4 {
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 20px;
}
.goods .bd li .txt p {
    color: red;
    font-size: 18px;
    margin-right: 3px;
}
.goods li .txt p span {
    font-size: 22px;
    margin-left: 3px;
}
.recommend .bd li {
    background-color: #fff;
}
.recommend .bd p {
    color: #a1a1a1;
}
/* 热门品牌 */
.brand {
    margin-top: 60px;
    height: 468px;
    background-color: #f5f5f5;
}
.brand .wrapper {
    overflow: hidden;
    height: 468px;
    /* background-color: pink; */
}
.brand .title {
    position: relative;
    margin-bottom: 40px;
}
.brand .button {
    position: absolute;
    right: 0;
    bottom: -25px;
    display: flex;
}
.brand .button a {
    margin-left: 12px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: #fff;
}
.brand .button .prev {
    background-color: #ddd;
}
.brand .button .next {
    background-color: #00eb9a;
}
.brand .bd li {
    width: 244px;
    height: 306px;
}

/* 生鲜 */
.fresh .title {
    margin-top: 60px;
    margin-bottom: 20px;
}
.title .right {
    display: flex;
}
.title .right ul {
    display: flex;
    margin-top: 10px;
    margin-right: 58px;
}
.title .right ul li a {
    margin-left: 6px;
    height: 20px;
    padding: 0 7px;
    line-height: 20px;
    display: block;
    /* background-color: pink; */
    color: #333;
}
.title .right ul li .active {
    background-color: #00eb9a;
    color: #fff;
}
/* 生鲜内容 */
.content {
    display: flex;
    justify-content: space-between;
}
.content .left {
    width: 248px;
    height: 610px;
    /* background-color: pink; */
}
.content .right {
    width: 968px;
    height: 610px;
    /* background-color: pink; */
}
.content .right ul {
    display: flex;
    flex-wrap: wrap;
}
.content .right li {
    width: 242px;
    height: 305px;
    border: 2px solid skyblue;
    padding: 10px 21px 0;
}
.content .right .pic {
    width: 200px;
    height: 180px;
}
.content .right .txt .info {
    height: 60px;
    margin-top: 14px;
    margin-bottom: 5px;
    line-height: 19px;
}
.content .right .txt .price {
    color: #AF2f22;
}
.content .right .txt .price span {
    font-size: 22px;
    margin-left: 5px;
}

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- meta:desc -->
    <meta name="description" content="小奶鲜儿直网，致力于打透全球最大的食品、生解电商购物平台">
    <!-- meta:kw -->
    <meta name="keywords" content="小免鲜儿食品.生解,服装家电,电商,购物">
    <title>小兔鲜儿-新鲜、惠民、快捷!</title>
    <!-- link:fa -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="#" style="color: aquamarine;">请先登录</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="#"><span class="iconfont icon-mobile-phone" ></span>请先登录</a></li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="header wrapper">
        <!-- logo -->
        <div class="logo">
            <h1><a href="#">小兔仙儿</a></h1>
        </div>
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#" class="active">首页</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 class="search">
            <span class="iconfont icon-search"></span>
            <input type="text" placeholder="搜一搜">
        </div>
        <!-- 购物车 -->
        <div class="cart">
            <span class="iconfont icon-cart-full"></span>
            <i>2</i>
        </div>
    </div>
    <!-- 结构:通栏>版心>轮播图 (ulpic)+侧导航 (subnav > ul) + 圆点指示器 (ol) -->
    <!-- banner -->
    <div class="banner">
        <div class="wrapper">
            <!-- 图片 -->
            <ul class="pic">
                <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
                <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
                <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
            </ul>
            <!-- 侧导航 -->
            <div class="subnav">
                <ul>
                    <li>
                        <div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                </ul>
            </div>
            <!-- 原点指示器 -->
            <ol>
                <li class="activate"><i></i></li>
                <li><i></i></li>
                <li><i></i></li>
            </ol>
        </div>
    </div>
    <!-- 新鲜好物 -->
    <div class="goods wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>新鲜好物</h3>
                <p>新鲜出炉 品质保证</p>
            </div>
            <div class="right">
                <a href="#">查看全部<span  class="iconfont icon-arrow-right-bold"></span></a>
            </div>
        </div>
        <!-- 内容 -->
        <div class="bd">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/goods1.png" alt="">
                        </div>
                        <div class="txt">
                            <h4>KN95级莫兰油色防护口罩</h4>
                            <p>$<span>79</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/goods1.png" alt="">
                        </div>
                        <div class="txt">
                            <h4>KN95级莫兰油色防护口罩</h4>
                            <p>$<span>79</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/goods1.png" alt="">
                        </div>
                        <div class="txt">
                            <h4>KN95级莫兰油色防护口罩</h4>
                            <p>$<span>79</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/goods1.png" alt="">
                        </div>
                        <div class="txt">
                            <h4>KN95级莫兰油色防护口罩</h4>
                            <p>$<span>79</span></p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 人气推荐 -->
    <div class="recommend wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>人气推荐</h3>
                <p>新鲜出炉 品质保证</p>
            </div>
        </div>
        <!-- 内容 -->
        <div class="bd">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/recommend1.png" alt="">
                        </div>
                        <div class="txt">
                            <h4>KN95级莫兰油色防护口罩</h4>
                            <p>$<span>79</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/recommend1.png" alt="">
                        </div>
                        <div class="txt">
                            <h4>KN95级莫兰油色防护口罩</h4>
                            <p>$<span>79</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/recommend1.png" alt="">
                        </div>
                        <div class="txt">
                            <h4>KN95级莫兰油色防护口罩</h4>
                            <p>$<span>79</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/recommend1.png" alt="">
                        </div>
                        <div class="txt">
                            <h4>KN95级莫兰油色防护口罩</h4>
                            <p>$<span>79</span></p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 热门品牌 -->
    <div class="brand">
        <div class="wrapper">
            <!-- 标题 -->
            <div class="title">
                <div class="left">
                    <h3>热门品牌</h3>
                    <p>新鲜出炉 品质保证</p>
                </div>
                <div class="button">
                    <a href="#" class="prev">
                        <i class="iconfont icon-arrow-left-bold"></i>
                    </a>
                    <a href="#" class="next">
                        <i class="iconfont icon-arrow-right-bold"></i>
                    </a>
                </div>
            </div>
            <!-- 内容 -->
            <div class="bd">
                <ul>
                    <li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 生鲜 -->
    <div class="fresh wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>生鲜</h3>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#" class="active">热门</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>
                <a href="#">查看全部<span  class="iconfont icon-arrow-right-bold"></span></a>
            </div>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="left">
                <a href="#"><img src="./uploads/fresh_left.png" alt=""></a>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                        <div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
                        <div class="txt">
                            <div class="info">
                                <h4>双味千层，手疆明烤肉推合</h4>
                                <p>240g/项4片装</p>
                                <p>加热即食</p>
                            </div>
                            <p class="price">$<span>89.99</span></p>
                        </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                        <div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
                        <div class="txt">
                            <div class="info">
                                <h4>双味千层，手疆明烤肉推合</h4>
                                <p>240g/项4片装</p>
                                <p>加热即食</p>
                            </div>
                            <p class="price">$<span>89.99</span></p>
                        </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                        <div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
                        <div class="txt">
                            <div class="info">
                                <h4>双味千层，手疆明烤肉推合</h4>
                                <p>240g/项4片装</p>
                                <p>加热即食</p>
                            </div>
                            <p class="price">$<span>89.99</span></p>
                        </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                        <div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
                        <div class="txt">
                            <div class="info">
                                <h4>双味千层，手疆明烤肉推合</h4>
                                <p>240g/项4片装</p>
                                <p>加热即食</p>
                            </div>
                            <p class="price">$<span>89.99</span></p>
                        </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                        <div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
                        <div class="txt">
                            <div class="info">
                                <h4>双味千层，手疆明烤肉推合</h4>
                                <p>240g/项4片装</p>
                                <p>加热即食</p>
                            </div>
                            <p class="price">$<span>89.99</span></p>
                        </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                        <div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
                        <div class="txt">
                            <div class="info">
                                <h4>双味千层，手疆明烤肉推合</h4>
                                <p>240g/项4片装</p>
                                <p>加热即食</p>
                            </div>
                            <p class="price">$<span>89.99</span></p>
                        </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                        <div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
                        <div class="txt">
                            <div class="info">
                                <h4>双味千层，手疆明烤肉推合</h4>
                                <p>240g/项4片装</p>
                                <p>加热即食</p>
                            </div>
                            <p class="price">$<span>89.99</span></p>
                        </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                        <div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
                        <div class="txt">
                            <div class="info">
                                <h4>双味千层，手疆明烤肉推合</h4>
                                <p>240g/项4片装</p>
                                <p>加热即食</p>
                            </div>
                            <p class="price">$<span>89.99</span></p>
                        </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>








    <!-- 底部导航 -->
    <div class="footer">
        <div class="wrapper">
            <!-- 服务 -->
            <div class="service">
                <ul>
                    <li>
                        <h5></h5>
                        <p>价格亲民</p>
                    </li>
                    <li>
                        <h5></h5>
                        <p>物流快递</p>
                    </li>
                    <li>
                        <h5></h5>
                        <p>品质新鲜</p>
                    </li>
                    <li>
                        <h5></h5>
                        <p>售后无忧</p>
                    </li>
                </ul>
            </div>
            <!-- 帮助中心 -->
            <div class="help">
                <div class="left">
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">购物流程</a></dd>
                    </dl>
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">购物流程</a></dd>
                    </dl>
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">购物流程</a></dd>
                    </dl>
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">购物流程</a></dd>
                    </dl>
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#">在线图标<span class="iconfont icon-customer-service"></span></a></dd>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">购物流程</a></dd>
                    </dl>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <div class="pic"><img src="./images/wechat.png" alt=""></div>
                            <p>微信公众号</p>
                        </li>
                        <li>
                            <div class="pic"><img src="./images/app.png" alt=""></div>
                            <p>微信公众号</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 版权 -->
            <div class="coopright">
                <p>
                    <a href="#">关于我们</a>|
                    <a href="#">关于我们</a>|
                    <a href="#">关于我们</a>|
                    <a href="#">关于我们</a>|
                    <a href="#">关于我们</a>|
                    <a href="#">关于我们</a>|
                    <a href="#">关于我们</a>
                </p>
                <p>coopright @ 小兔仙儿</p>
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

CSS案例---个人简历
qq_46150052的博客
10-25 1035
效果图： 实现代码： <head> <meta charset="UTF-8"> <title>Document</title> <style> h1{ text-align: center; } .info{ color: green; } em{ color: red; } p{ text-indent: 2em; } </style> </head>
Vue 购物车案例 黑马学院
qq_42316056的博客
11-22 2970
Vue 购物车案例 黑马学院 ，购物车作业，vue2.0作业， v-model 数据双向绑定，axios ，计算属性等等。
分享 10 个常见的 CSS 页面布局代码片段
前端达人
02-20 7195
大家好，本篇文章将分享我们业务中很常见的10个页面布局代码片段，这10 种页面布局很常见，实现方式也有很多种，本篇文章将用最简单的新方式进行实现，希望对大家有所启发。1、Card layo...
common.css自用
最新发布
mr123666的博客
02-21 120
【代码】common.css自用。
CSS简单网页示例
weixin_52629592的博客
06-20 869
​ 运行结果如下:
css 案例
Jy123_的博客
11-25 483
学会css3你会发现你可以实现许多东西 两面翻转的图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
【CSS实例】
qll123的专栏
02-21 2728
学习目标： css样式学习、总结，知识巩固 学习内容： 在这里我将会发布一些自己学习过程中完成的css实例，可能是跟着网上学习的练习作品，也可能是自的随意的一个想法。每个作品中会列出编写思路，和编写过程中出现的问题。 目的就是巩固css的基础知识，防止遗忘 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 一、css画时钟 1、涉及到的css技术 利用css绘制圆形 .circle{ ...
基于HTML与CSS的“黑马实习的日子”网页设计源码分享
09-28
基于HTML与CSS技术的“黑马实习的日子”网页设计源码分享，是一项专门为网页设计初学者和开发者量身打造的项目。它以简洁明了的方式，通过20个精心制作的文件，向我们展示了如何利用HTML和CSS制作出一个完整且具有...
黑马基础学习html+css课程笔记和案例
06-29
在“黑马基础学习html+css课程笔记和案例”中，你可能会看到如何将静态的HTML和CSS应用到实际的网页设计中，例如响应式布局的实现，使用Flexbox或Grid布局，以及如何使用CSS预处理器（如Sass、Less）提高代码的可...
家居网-网页课程设计（JS + CSS + HTMl ）+ 设计报告
07-09
网页文件(.html)至少5个，实现至少10个功能，每个网页至少体现1个功能，具体要求如下： (1)使用DOM和事件操作元素、属性和内容，改变外观和提高交互性共4次。例如增删留言、Tab选项卡等。 (2)使用表单和控件的常用...
HTML5+CSS3网页设计与制作电子教材.rar
10-25
HTML5和CSS3是现代网页开发的两大核心技术，它们共同为网页提供了丰富的表现力和强大的交互性。HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，而CSS3则是层叠样式表（Cascading Style Sheets）...
20多个CSS样式表精选案例（实用、常用案例）
08-24
个人精心整理收藏，值得推荐！包括《网页设计标准尺寸》文档 搜索引擎 DIV层居中 无图片实现圆角框 精典布局等实用案例！无论新手老手都值得收藏！
纯HTML5+CSS个人网站示例 + 源码 + 网站规则书
02-21
前端学习非常好的实战示例，里面还有网站规划说明 。
CSS 示例
Canyun3821的博客
06-24 542
CSS学习
CSS-200个小案例（一）
qq_55154022的博客
12-15 3473
最近我在youtube上跟着大神学习200个CSS小案例，作者Online Tutorials 编码的内容很实用，案例中涉及定位、变换、动画等概念，适合进一步学习和巩固CSS知识，能帮助我们实现页面的特效。
黑马程序员_CSS篇
坚持才是硬道理
03-21 1142
------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ------- 一、CSS认识 1.CSS作用：决定网页内容的Layout 2.CSS优点：制作和管理网页方便、更加精细控制网页的内容形式、样式丰富多彩、样式灵活多样 3.CSS按其位置分为三种： (1)内嵌样式，写在Tag里面，只对所在的Tag有效 例：  (2)内部样式表，写在里面，只对所在
黑马CSS
Yiky的博客
05-18 1120
黑马CSS笔记 文章目录黑马CSS笔记1 CSS入门1.1 初识CSS1.1.1 概述1.1.2 CSS的组成1.2 入门案例1.3 Chrome开发者工具1.4 总结2 基本语法2.1 引入方式2.1.1 内联样式2.1.2 内部样式表2.1.3 外部样式表2.2 关于注释2.3 关于选择器2.2.1 基本选择器1）元素选择器2）类选择器3）ID选择器4）通用选择器2.2.2 属性选择器2.2.3 伪类选择器2.2.4 组合选择器1）后代选择器2）子级选择器3）同级选择器4）相邻选择器2.4 总结3
27 个 CSS 案例演示和 DEMO
2401_84092456的博客
04-12 738
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！点击【学习资料】即可领取！，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-hftjZxoy-1712861780221)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
css 背景效果_软件技术：我写CSS的常用套路(附demo的效果实现与源码）
weixin_39577908的博客
11-20 694
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。1、交错动画有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟(delay)这一属性。举个栗子，...
黑马程序员htmlcss案例day14
02-03
### 黑马程序员 HTML 和 CSS Day 14 案例 #### 表单验证与提交处理 在第十四天的学习中，重点在于表单的高级应用和交互效果。通过使用 JavaScript 结合 HTML 和 CSS 来增强用户体验。 ```html <form id="registrationForm"> <div> <!-- 使用 label 标签关联输入框 --> <label for="username">用户名:</label> <input type="text" name="username" required /> </div> <div> <label for="password">密码:</label> <input type="password" name="password" pattern=".{6,}" title="至少六个字符" required /> </div> <button type="submit">注册</button> </form> ``` 为了确保用户填写的信息有效，在 `<form>` 中加入了 `required` 属性来防止空白提交，并利用 `pattern` 对特定字段设置正则表达式的约束条件[^5]。 #### 动态样式调整 当页面加载完成或者发生某些事件时，可以通过JavaScript动态改变元素的样式： ```javascript document.getElementById('registrationForm').addEventListener('submit', function(event){ event.preventDefault(); // 阻止默认行为 const form = this; if (validateForm(form)) { document.querySelector('.success-message').style.display = 'block'; setTimeout(() => { form.reset(); document.querySelector('.success-message').style.display = 'none'; }, 3000); } }); function validateForm(form) { let isValid = true; Array.from(form.elements).forEach(element => { if (!element.checkValidity()) { element.classList.add('invalid'); isValid = false; } else { element.classList.remove('invalid'); } }); return isValid; } ``` 这段脚本会在点击按钮前先做一次简单的客户端校验，如果成功，则显示一条成功的消息并重置表单；如果有任何错误，则给相应的输入项加上 `.invalid` 类以便于视觉反馈[^2]。 #### 自定义伪类选择器的应用 对于更复杂的UI需求，可以自定义一些CSS伪类来进行特殊状态下的样式控制: ```css /* 定义全局变量 */ :root { --primary-color: #ff8a80; } /* 当鼠标悬停在版权信息上的链接时变色 */ .copyright a:hover { color: var(--primary-color); } .invalid { border-color: red !important; box-shadow: 0 0 5px rgba(255, 0, 0, .7); } ``` 这里不仅实现了基本的功能性操作，还考虑到了美观性和易用性的提升[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鷇韩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值