Web前端笔记（4）

前端完整页面设计：

1. PC端布局：

通栏：自适应浏览器的宽度

版心 ：固定一个宽度，并让容器居中

页面中需要用到的图片：(由于本人未能找到原版的图片资源，所以只是利用截屏到的图片，进行简单截图后使用，清晰度不够，单用于学习前端学习已足够)

图片资源链接：https://pan.baidu.com/s/1ZhaQ8oc2pGuH5uZvXsxjlQ 
提取码：vj93 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博文尚美</title>
    <link rel="stylesheet" href="../CSS/common.css">
    <style>
        #banner{
            position: relative;
        }
        #banner .banner-list{
            width: 100%;
            height: 394px;
            position: relative;
        }
        #banner .banner-list li{
            width: 100%;
            height: 100%;
            background: center 0 no-repeat;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            z-index: 1;
        }
        #banner .banner-list a{
            display: block;
            width: 100%;
            height: 100%;
        }
        #banner .banner-list li.active{
            opacity: 1;
            z-index: 10;
        }
        #banner .banner-btn{
            width: 100%;
            position: absolute;         /*需要定位*/
            bottom: 19px;
            /*left: 200px;*/
            z-index: 20;
            text-align: center;
        }
        #banner .banner-btn li{
            display: inline-block;      /*转换为block，定义大小*/
            width: 12px;
            height: 12px;
            border: 2px solid black;
            border-radius: 50%;
            box-sizing: border-box;
            cursor: pointer;
        }
        #service{
            overflow: hidden;
            min-height: 407px;
        }
        #service .service-list{
            text-align: center;
            margin-top: 34px;
        }
        #service .service-list li{
            float: left;
            width: 250px;
            margin: 0 10px;
        }
        #service .service-list div{
            width: 81px;
            height: 81px;
            margin: 0 auto;
        }
        #service .service-list h3{
            font-size: 18px;
            color: #434343;
            line-height: 36px;
            margin-top: 25px;
        }
        #service .service-list p{
            font-size: 14px;
            color: #6d6d6d;
            line-height: 22px;
        }
        /*设置背景图片*/
        #service .service-list li:nth-of-type(1) div{
            background-image: url("../picture/bowen/3.png");
        }
        #service .service-list li:nth-of-type(2) div{
            background-image: url("../picture/bowen/4.png");
        }
        #service .service-list li:nth-of-type(3) div{
            background-image: url("../picture/bowen/5.png");
        }
        #service .service-list li:nth-of-type(4) div{
            background-image: url("../picture/bowen/6.png");
        }
 
        #case{
            background: #f8f8f8;
        }
        #case .container{
            min-height: 460px;
            overflow: hidden;
        }
        #case .area-title{
            margin-top: 55px;
        }
        #case .area-title h2{
            color: #66c5b4;
        }
        #case .case-list{
            margin-top: 28px;
        }
        #case .case-list li{
            float: left;
            width: 340px;
            margin: 0 10px;
        }
        #case .case-btn{
            width: 176px;
            height: 37px;
            background: #66c5b4;
            margin: 0 auto;
            border-radius: 15px;
            line-height: 37px;
            text-align: center;
            font-size: 14px;
            margin-top: 36px;
        }
        #case .case-btn a{
            display: block;
            width: 100%;
            height: 100px;
            color: white;
        }
 
        #news{
            min-height: 450px;
            overflow: hidden;    /*防止margin传递，进行溢出隐藏*/
        }
        #news .news-list{
            width: 100%;
        }
        #news .news-list li{
            width: 50%;
            margin-bottom: 48px;
            float: left;
        }
        #news .area-title {
            margin-top: 68px;
        }
        #news dl{
            margin-top: 48px;
        }
        #news dt{
            float: left;
            width: 234px;
            /*height: 196px;*/
        }
        #news dd{
            float: left;
            width: 846px;
        }
        #news .news-date{
            float: left;
            width: 70px;
            height: 70px;
            border-right: solid 1px #dcdcdc;
            text-align: center;
        }
        #news .news-date i{
            color: #66c5b4;
            font-size: 39px;
            display: block;
            font-weight: bold;
         }
        #news .news-date span {
            color: #999999;
            font-size: 20px;
            line-height: 36px;
        }
        #news .news-text{
            float: left;
            width: 310px;
            margin-left: 20px;
        }
        #news .news-text h3{
            font-size: 14px;
        }
        #news .news-text h3 a{
            color: #3f3f3f;
        }
        #news .news-text p{
            color: #a4a4a4;
            font-size: 12px;
            line-height: 21px;
            margin-top: 17px;
        }
    </style>
</head>
<body>
    <div id="head" class="container clear">
        <div class="head-logo l">
            <a href="#">
                <img alt="博文尚美" title="博文尚美" src="../picture/bowen/1.png">
            </a>
        </div>
        <ul class="head-menu r">
            <li>
                <a href="#">HOME</a>
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
            <li>
                <a href="#">PORTFOLIO</a>
            </li>
            <li>
                <a href="#">SERVICE</a>
            </li>
            <li>
                <a href="#">NEWS</a>
            </li>
            <li>
                <a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
    <div id="banner" class="container-fluid">     <!--图片轮播的效果-->
        <ul class="banner-list">
            <li class="active" style="background-image: url(../picture/bowen/2.png)">
                <a href="#"></a>
            </li>
            <li style="background-image: url(../picture/bowen/2.png)">
                <a href="#"></a>
            </li>
            <li style="background-image: url(../picture/bowen/2.png)">
                <a href="#"></a>
            </li>
            <li style="background-image: url(../picture/bowen/2.png)">
                <a href="#"></a>
            </li>
        </ul>
        <ol class="banner-btn">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div id="service" class="container">
        <div class="area-title">
            <h2>服务范围</h2>
            <p>OUR SERVICE</p>
        </div>
        <ul class="service-list">
            <li>
                <div>
 
                </div>
                <h3>1.WEB DESIGN</h3>
                <p>企业品牌网站设计/手机网站制作</p>
                <p>动画网站创意设计</p>
            </li>
            <li>
                <div>
 
                </div>
                <h3>2.GRAPHIC DESIGN</h3>
                <p>标志LOGO设计/产品宣传册设计</p>
                <p>企业广告/海报设计</p>
            </li>
            <li>
                <div>
 
                </div>
                <h3>3.E-BUSINESS PLAN</h3>
                <p>淘宝天猫装修设计及运营推广</p>
                <p>企业微博，微信营销</p>
            </li>
            <li>
                <div>
 
                </div>
                <h3>4.MAILBOX AGENT</h3>
                <p>腾讯/网易企业邮箱品牌代理</p>
                <p>个性化邮箱定制开发</p>
            </li>
        </ul>
    </div>
    <div id="case" class="container-fluid">
        <div class="container">
            <div class="area-title">
                <h2>{客户案例}</h2>
                <p>with the best professional technology</p>
            </div>
            <ul class="case-list clear">
                <li>
                    <a href="#">
                        <img alt="" src="../picture/bowen/7.png">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img alt="" src="../picture/bowen/8.png">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img alt="" src="../picture/bowen/9.png">
                    </a>
                </li>
            </ul>
            <div class="case-btn">
                <a href="#">view more</a>
            </div>
        </div>
    </div>
    <div id="news" class="container">
        <div class="area-title">
            <h2>最新资讯</h2>
            <p>THE LATEST NEWS</p>
        </div>
        <dl>
            <dt>
                <img src="../picture/bowen/10.png" alt="" style="width: 234px;height: 196px">
            </dt>
            <dd>
                <ul class="news-list">
                    <li>
                        <div class="news-date">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news-text">
                            <h3><a href="#">网站排名进入前三的技巧排名</a></h3>
                            <p>
                                很多客户都会纳闷自己的网站优化为什么到不了搜索引擎的首页，
                                更不用说进入前三了，那么网站优化的技巧
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="news-date">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news-text">
                            <h3><a href="#">网站排名进入前三的技巧排名</a></h3>
                            <p>
                                很多客户都会纳闷自己的网站优化为什么到不了搜索引擎的首页，
                                更不用说进入前三了，那么网站优化的技巧
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="news-date">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news-text">
                            <h3><a href="#">网站排名进入前三的技巧排名</a></h3>
                            <p>
                                很多客户都会纳闷自己的网站优化为什么到不了搜索引擎的首页，
                                更不用说进入前三了，那么网站优化的技巧
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="news-date">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news-text">
                            <h3><a href="#">网站排名进入前三的技巧排名</a></h3>
                            <p>
                                很多客户都会纳闷自己的网站优化为什么到不了搜索引擎的首页，
                                更不用说进入前三了，那么网站优化的技巧
                            </p>
                        </div>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>
    <div id="foot" class="container-fluid">
        <div class="container">
            <p class="l">
                CopyRight 2006-2014 Bowenshangmei Culture All Rights Reserved
            </p>
            <div class="r">
                <a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> |
                <a href="#">Contact</a>
            </div>
        </div>
    </div>
</body>
</html>

通用的CSS样式 common.css

*{
    margin: 0;
    padding: 0;
}
ul, ol{
    list-style: none;
}
img{
    display: block;
}
a{
    text-decoration: none;
    color: #464646;
}
h1, h2, h3, h4, h5, h6{
    font-size: 16px;
}
body{
    font-family: Arial, "Microsoft YaHei UI";
}
 
.l {
    float: left;
}
 
.r{
    float: right;
}
 
.clear:after{
    content: "";
    display: block;
    clear: both;
}
 
.container{
    width: 1080px;
    margin: 0 auto;
    position: relative;
}
 
.container-fluid{
    width: 100%;
}
 
#head{
    height: 81px;
}
 
#head .head-logo{
    width: 162px;
    height: 44px;
    margin-top: 19px;
}
 
#head .head-menu{
    font-size: 14px;
    line-height: 81px;
}
 
#head .head-menu li{
    float: left;
    margin-left: 58px;
}
 
.area-title{
    margin-top: 60px;
}
 
.area-title h2{
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    color: #363636;
    text-align: center;
}
 
.area-title p{
    color: #9f9f9f;
    font-size: 14px;
    line-height: 34px;
    text-align: center;
}
 
#foot{
    background: #66c5b4;
}
#foot .container{
    height: 54px;
    font-size: 12px;
    color: white;
}
#foot p{
    line-height: 54px;
}
#foot a{
    line-height: 54px;
    color: white;
    margin: 0 18px;
}
#foot div{
 
}

页面的效果：

顺便附上谷歌浏览器截全屏的方法:

参考博客：https://blog.csdn.net/llwy1428/article/details/92834705

 

posted @   Alpha205  阅读(101)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae