前端HTML＋css基础网页开发1

admin管理员组

文章数量:1655497

       该网页主要运用html结合css对一些电商网页的首页进行复刻，俗话说：“读书破万卷，下笔如有神”。更何况是作为程序员的我们，这也是我的第一篇博客，大佬们觉得不好勿喷 感谢 欢迎喜欢前端的同学一同交流

        下面附上实例图：

一、首页导航栏效果

1.置顶导航栏模块：实现鼠标悬停时，改变字体颜色且变亮 有渐变的效果实现动态化 此外在图中手机版用的是子绝父相的定位方法 相当于用纯css实现下拉菜单效果 详细见图1二维码处

2.菜单导航栏模块：采用同上述一样的渐变以及鼠标悬停时可书写的效果 

3.菜单导航侧栏模块：采用同上述一样的渐变及鼠标悬停效果 (提一句：渐变是个好东西)，再为下面轮播图模块增加一个半透明效果。

4.轮播图模块：一个盒子中包含菜单导航侧栏与轮播图模块 其中轮播图位于侧栏下方 采用子绝父相的方法设置位置 轮播图按钮及指示器均用子绝父相的方法添加(因为当时没学到js语法 所以没有轮播图效果)   

解决办法：引用bootstrap框架可以写出

 

二、商品推荐栏效果

1、潮流前沿模块与新鲜好物模块：摒弃以往单一的变色等效果 使用速度较快的渐变搭配图片变大，使得商品更具吸引力 介绍栏则为传统的变色加粗

 

 三、网页底部效果

1、如同置顶导航栏中每个按钮之间的横线（并不是完整的链接最左与最右端）道理一样 底部的分割线 依靠版心公共类限制 才能完美复刻网页呈现的效果 其他效果在上面已大概阐述 这里便不多赘述了 看图：

最后附上部分代码 欢迎讨论

<!-- 快捷菜单模块 -->
        <div class="xyz-shortcut">
            <!-- 版心盒子 -->
            <nav class="container" style="position: sticky;">
                <ul class="fr">

                    <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 class="app"><a href="#">手机版<img src="./fix img/friend.jpg" alt=""></a></li>
                </ul>
            </nav>
        </div>

 

<!-- 导航模块 -->
        <div class="xyz-nav container">
            <!-- logo -->
            <h1 class="logo fl"><a href="#"><img src="./fix img/crass - 副本.jpg" alt=""></a></h1>
            <!-- 导航 -->
            <nav class="fl">
                <ul>
                    <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>
            </nav>
            <!-- 搜索 -->
            <div class="search fl">
                <input type="search" placeholder="搜一搜">
            </div>
        </div>   

 

<!-- 商品分类侧边栏 -->
            <aside class="category">
                <ul>
                    <li><a href="#">生鲜<span>水果 </span><span>蔬菜</span></a></li>
                    <li><a href="#">美食<span>面点 </span><span>干果</span></a></li>
                    <li><a href="#">餐厨<span>数码产品 </span></a></li>
                    <li><a href="#">电器<span>床品 </span><span>四件套 </span><span>被枕</span></a></li>
                    <li><a href="#">居家<span>奶粉 </span><span>玩具 </span><span>辅食</span></a></li>
                    <li><a href="#">洗护<span>洗发 </span><span>洗护 </span><span>美妆</span></a></li>
                    <li><a href="#">孕婴<span>奶粉 </span><span>玩具</span></a></li>
                    <li><a href="#">服饰<span>男装 </span><span>女装</span></a></li>
                    <li><a href="#">杂货<span>户外 </span><span>图书</span></a></li>
                    <li><a href="#">品牌<span>品牌制造 </span></a></li>
                </ul>
            </aside>

<!--潮流前沿模块-->
    <div class="xyz-new-goods container">
        <!--好物模块的头部-->
        <div class="goods-hd">
                <!--左边的h2-->
                <h2 class="fl">
                    潮流前沿<span class="title-discr">新鲜出炉 品质靠谱</span>
                </h2>
                <!------右侧的a----->
                <a href="" class="goods-index fr">查看全部 &gt</a>
        </div>
        <ul class="goods-list">
            <li>
                <img src="./update img/goods-2.webp" alt="">
                <p>【苹果 iPad mini 2021 Pro】 掌上ipad</p>
                <p>国行官方旗舰店5g/ipad 2021 pro</p>
                <p>&yen 5888</p>
            </li>
            <li>
                <img src="./update img/goods-1.jpg" alt="">
                <p>【苹果 iPhone 12 Pro Max】 5G智能手机</p>
                <p>国行官方旗舰店5g/iPhone12pro max</p>
                <p>&yen 12888</p>
            </li>
            <li>
                <img src="./update img/goods-3.jpeg" alt="">
                <p>【苹果 iPhone 11 Pro 】 4G智能手机</p>
                <p>国行官方旗舰店 4g /iPhone 11 pro 顶配</p>
                <p>&yen 5888</p>
            </li>
            <li> <img src="./update img/goods-4.jpeg" alt="">
                <p>【华为 huawei P50 土豪金】 5G智能手机</p>
                <p>官方旗舰店5g/huawei P50 土豪金</p>
                <p>&yen 12888</p></li>
        </ul>
       
    </div>

<!--底部模块-->
    <footer>
        <!--宣传服务-->
        <div class="xyz-serve">
            <div class="container">
                <a href="#">价格亲民</a>
                <a href="#">物流快捷</a>
                <a href="#">品质新鲜</a>
            </div>
        </div>
        <!--版权信息-->
        <div class="xyz-copyright">
            <div class="container">
            <p>
                <a href="#">关于我们</a>|
                <a href="#">帮助中心</a>|
                <a href="#">售后服务</a>|
                <a href="#">配送与验收</a>|
                <a href="#">商务合作</a>|
                <a href="#">搜索推荐</a>|
                <a href="#">友情链接</a>
            </p> 

            <p><a>Copyright @ 小叶子儿</a></p>
            </div>
        </div>
    </footer>

公共类模块：

/*去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
    margin: 0;
    padding: 0;
} 

/* 设置网页统一的文字大小、行高、文字系列等相关属性 */
body {
    font: 12px/1.5 "Nelvetica Neue", Nelvetica, Arial,"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 {
    vertical-align: middle;
}

/* 去除input默认样式 */
input {
    border: none;
    background-color: pink;
    outline: none;
    color: #333;
}

/* 左浮动 */
.fl {
     float: left;
}

/* 右浮动 */
.fr {
    float: right;
}

/* 双为元素清除法 */
.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}

.clearfix::after {
    clear:both;
}

头部css公共类：

.container {
    width: 1040px;
    margin: 0 auto;
    
}

头部部分许多由于未能识别出语言没办法放出 省略

网页详情部分css：

/*--------------网站入口-------------------*/
.xyz-entry {
    height: 420px;
    background-color: #f5f5f5;
}
.xyz-entry .container {
    position: relative;
    height: 420px;
    background-color: pink;
}
.xyz-entry .container img {
    
    height: 420px;
    width: 100%;
}

.xyz-entry .container .category {
    position: absolute;
    left: 0;  /*----------子绝父相所必要的位置调整------------*/
    top: 0;
    width: 230px;
    height: 420px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0,.8);
}

.xyz-entry .container .category a {
    font-size: 16px;
    display: inline-block;
    color: #fff;
    line-height: 40px;
    margin-left: 20px;
}
.xyz-entry .container .category li {
    border-bottom: 1px solid rgb(66, 61, 61);
    position: relative;
}
.xyz-entry .container .category li:last-child {
    border-bottom:none;
}
.xyz-entry .container .category span {
    font-size: 13px;
}
.xyz-entry .container .category span:first-child {
    margin-left: 15px;
}
.xyz-entry .container .category li:hover {
    color: aliceblue;
    transition: all 0.5s;
    background-color: rgb(82, 108, 223);
}
.xyz-entry .container .category a::after {
    content: '>';
    position: absolute;
    top: 3px;
    right: 10px;
    font-size: 20px;
    color: white;
}
/*---------------左右按钮--------------------*/
.xyz-entry .container .prev {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 205px;
    left: 230px;
    /*----------ps-----------------*/
    background-color: #333;
    opacity: 0.7;
    border-radius: 50%;
    color: #e7e7e7;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
}
.xyz-entry .container .prev:hover {
    background-color: #fff;
    color: #333;
    opacity: 1;
}
.xyz-entry .container .next {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 205px;
    right: 10px;
    /*----------ps-----------------*/
    background-color: #333;
    opacity: 0.8;
    border-radius: 50%;
    color: #e7e7e7;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
}
.xyz-entry .container .next:hover {
    background-color: #fff;
    color: #333;
    opacity: 1;
}

/*--------------------------轮播图指示器---------*/
.xyz-entry .indicate {
    position: absolute;
    bottom: 23px;
    right: 353px;
    width: 110px;
    height: 10px;
    /*ps*/
    /*background-color: pink;*/
}

.xyz-entry .indicate li {
    float: left;
    width: 10px;
    height: 10px;
    margin-right: 14px;
    border-radius: 50%;
    background-color: #333;
    opacity: 0.5;
}
.xyz-entry .indicate li:last-child {
    margin-right: 0;
}
.xyz-entry .indicate li:hover {
    background-color: #fff;
    opacity: 1;
}
/*----------------------------好物模块-----------*/
.xyz-new-goods {
    height: 500px;
    /*-------ps-----*/
    /*background-color: pink;*/
}
/*----------------------好物模块头部-------------------*/
.xyz-new-goods .goods-hd {
    height: 100px;
    /*---------ps------------*/
    /*background-color: #999;*/
    line-height: 100px;
    box-sizing: border-box;
}
.xyz-new-goods .goods-hd h2 {
    font-size: 27px;
    width: 230px;
    height: 100px;
    font-weight: 400;
    padding-left: 5px;
    box-sizing: border-box;
}
.xyz-new-goods .goods-hd h2 span {
    font-size: 10px;
    color: #444;
    margin-left: 10px;
    vertical-align: middle;
}
.xyz-new-goods .goods-hd .goods-index {
    color:#999;
}
.xyz-new-goods .goods-hd .goods-index:hover {
    color: orange;
}

/*--------------------好物模块body-----------------------*/
.xyz-new-goods .goods-list {
    height: 400px;
    /*ps*/
    /*background-color: blue;*/
}
.xyz-new-goods .goods-list li {
    float: left;
    width: 247.5px;
    height: 400px;
    /*ps*/
    /*background-color: purple;*/
    margin-left: 10px;
    
}
.xyz-new-goods .goods-list li:last-child {
    margin-right: 10px;
}
.xyz-new-goods .goods-list li img {
    width: 247.5px;
    height: 230px;
    transition: all 0.5s;
    border-right: 1px #444 solid;
    margin-top: 30px;
}
.xyz-new-goods .goods-list li:hover img {
    overflow: hidden;
    width: 252.5px;
    height: 235px;
}

.xyz-new-goods .goods-list li:last-child img{
    border-right: 0;
}
.xyz-new-goods .goods-list li p {
    text-align:center;
    color: #333;
    margin-top: 10px;
    font-size: 16px;
}
.xyz-new-goods .goods-list li p:nth-last-child(2) {
    margin-top: 0;
    color:#868383;
    font-size: 13px;
    margin-left: 5px;
    margin-right: 5px;
}
.xyz-new-goods .goods-list li p:last-child {
    color:orange;
    font-size: 20px;
}

.xyz-new-goods .goods-list li p:hover {
    color: orange;
}

质量还行的话 欢迎收藏 后续会产出更多优质文章 感谢！

本文标签： 网页基础htmlcss