博文尚美静态网页

已于 2023-10-15 18:50:50 修改
阅读量604 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 笔记 文章标签： html5 css3
于 2021-09-30 12:39:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wychh85/article/details/120564562
这是一个关于博文尚美的HTML静态页面，展示了公司的品牌形象、服务范围包括WEB设计、标志设计、电商运营等，并提及客户案例和最新资讯。页面设计包括头部导航、轮播图、服务板块、客户案例展示和新闻资讯列表，整体布局清晰，风格专业。

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

##博文尚美HTML静态页面
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="./index.css">
</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <img src="./images/images/logo.png" alt="">
        <div>
            <span>HOME</span>
            <span>ABOUT</span>
            <span>PROTFOLIO</span>
            <span>SERVICE</span>
            <span>CONTACT</span>
        </div>
    </div>

    <!-- 轮播图 -->
    <div class="banner">
        <img src="./images/images/banner.png" alt="">
        <div>
            <span></span>
            <span class="active"></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <!-- 服务范围 -->
    <div class="services">
        <div class="title">
            <p class="title-top">
                <span></span>
                <span>服务范围</span>
                <span></span>
            </p>
            <p>our services</p>
        </div>

        <div class="box">
            <div>
                <img src="./images/images/section1-img1.png" alt="">
                <p>1.WEB DESIGN</p>
                <p>企业品牌网站设计/手机网站制作动画网站创意设计</p>
            </div>

            <div>
                <img src="./images/images/section1-img2.png" alt="">
                <p>1.WEB DESIGN</p>
                <p>标志logo设计/产品宣传册设计企业广告/海报设计</p>
            </div>

            <div>
                <img src="./images/images/section1-img3.png" alt="">
                <p>1.WEB DESIGN</p>
                <p>淘宝/天猫装修设计及运营推广企业微博,微信营销</p>
            </div>

            <div>
                <img src="./images/images/section1-img4.png" alt="">
                <p>1.WEB DESIGN</p>
                <p>腾讯/网易企业邮箱品牌代理 个性化邮箱定制开发</p>
            </div>

        </div>
    </div>

    <!-- 客户案例 -->
    <div class="customer_case">
        <div class="title">
            <p class="title-top">
                <span></span>
                <span style="color: #66c5b4;">{客户案例}</span>
                <span></span>
            </p>
            <p>With the best professional technology,to design the best innovative web site</p>
        </div>
        <div class="customer_case_img">
            <img src="./images/images/section2.png" alt="">
            <img src="./images/images/section2.png" alt="">
            <img src="./images/images/section2.png" alt="">
        </div>
        <div class="btn">VIEW MOVE</div>

    </div>

    <!-- 最新资讯 -->
    <div class="latest_news">
        <div class="title">
            <p class="title-top">
                <span></span>
                <span>最新资讯</span>
                <span></span>
            </p>
            <p>TEH LATEST NEWS</p>
        </div>
        <div class="conent">
            <img src="./images/images/section3.png" alt="">
            <div class="conent-box">
                <div class="conent-box1">
                    <div>
                        <p>09</p>
                        <p>Jan</p>
                    </div>
                    <div>
                        <p>网站排名进入前三的技巧说明</p>
                        <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页，更不用说进首页前三了。那么网站优...</p>
                    </div>
                </div>

                <div class="conent-box1">
                    <div>
                        <p>09</p>
                        <p>Jan</p>
                    </div>
                    <div>
                        <p>网站排名进入前三的技巧说明</p>
                        <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页，更不用说进首页前三了。那么网站优...</p>
                    </div>
                </div>

                <div class="conent-box1">
                    <div>
                        <p>09</p>
                        <p>Jan</p>
                    </div>
                    <div>
                        <p>网站排名进入前三的技巧说明</p>
                        <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页，更不用说进首页前三了。那么网站优...</p>
                    </div>
                </div>

                <div class="conent-box1">
                    <div>
                        <p>09</p>
                        <p>Jan</p>
                    </div>
                    <div>
                        <p>网站排名进入前三的技巧说明</p>
                        <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎 首页，更不用说进首页前三了。那么网站优...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
        <div>
            <span class="footer-1">Home</span>
            <span>About</span>
            <span>Portfolio</span>
            <span>Contact</span>
        </div>
    </div>

</body>

</html>

CSS样式部分

*{
    margin: 0;
    padding: 0;
}

/*公共样式部分 */
.title{
    text-align:center;
    
}

.title>.title-top>span:nth-child(2){
    
    margin: 0 50px;
    color:#363636;
    font-size: 20px;
}

.title>.title-top>span:first-child{
    display: inline-block;
    width:100px;
    height:2px;
    vertical-align: middle;
    background-color: #c3c3c3;
    position: relative;
}

.title>.title-top>span:first-child::before{
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #c3c3c3;
    position: absolute;
    top:-4px;
    right:-9px;
}

.title>.title-top>span:last-child{
    display: inline-block;
    width:100px;
    height:2px;
    vertical-align: middle;
    background-color: #c3c3c3;
    position: relative;
}

.title>.title-top>span:last-child::before{
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #c3c3c3;
    position: absolute;
    top:-4px;
    left:-9px;
}

.title p:last-child{
    margin-top: 10px;
    font-size: 14px;
    color:#c3c3c3
}


/* 头部 */
.header{
    
    width:1024px;
    height:80px;
    margin: 0 auto;
    /* border:1px solid red; */
   

}

.header img{
    margin-top: 15px;
}

.header>div{
    float:right;
    /* border:1px solid red; */
    line-height:80px;
   
}

.header>div>span{
    color:#646464;
    margin: 20px;
}


/* 轮播图 */
.banner>img{
    width:100%;
   
} 

.banner>div{
    margin-top:-60px;
    text-align: center;
    
    
}

.banner>div>span{
    display: inline-block;
    border:2px solid white;
    width:10px;
    height:10px;
    margin: 10px;
    border-radius: 50%;
}

.banner>div>span.active{
    background-color: white;
}


/* 服务范围 */
.services{
    width:1024px;
    margin: 80px auto 0;
    
}

.services>.box>div{
    text-align: center;
    width:250px;
    height:300px;
    margin: 0;
    padding:30px;
    box-sizing: border-box;
    display: inline-block;
    /* border:1px solid red; */
}

.services>.box>div>p:first-of-type{
    margin-top: 20px;
    font-weight: bold;
}

.services>.box>div>p:last-child{
    margin-top: 20px;
    font-size:14px;
    color:#6d6d6d;
}


/* 客户案例 */
.customer_case{
    
    padding-top: 50px;
    background-color:#f8f8f8;
    padding-bottom: 50px;
}

.customer_case .customer_case_img{
    width:1024px;
    margin: 50px auto;
    /* border:1px solid red; */

}

.customer_case.customer_case_img>img{
    width:328px;
}

.customer_case .customer_case_img>img:nth-child(2){
    margin: 0 -2px;
}

.customer_case .btn{
    width:180px;
    height:40px;
    margin: 0 auto;
    color:white;
    line-height: 40px;
    text-align: center;
    border-radius: 20px;
    background-color: #66c5b4;
}


/* 最新资讯 */
.latest_news{
    margin-top: 50px;
}

.latest_news .conent{
    width:1024px;
    margin: 50px auto;
    /* border:1px solid red;*/
} 

.latest_news .conent .conent-box{
    display: inline-block;
    width:783px;
    height:196px;
    /* border:1px solid red; */
}

.latest_news .conent-box>.conent-box1{
    box-sizing: border-box;
    display: inline-block;
    width:49%;
    margin-left: 5px;
    /* border:1px solid red; */
    height:48%;
}

.latest_news .conent-box1>div:first-child{
    float:left;
    width:73px;
    height:80px;
    border-right:1px solid #dcdcdc;
    text-align: center;
}

.latest_news .conent-box1>div:first-child>p:last-child{
    float:left;
    width:73px;
    height:80px;
    color: #a4a4a4;
    text-align: center;
}

.latest_news .conent-box1>div:first-child>p:first-child{
    font-size:39px;
    color:#66c5b4;
    /* font-size:bold; */
    font-family: 'Times New Roman', Georgia, serif;
}

.latest_news .conent-box1>div:last-child{
    float: left;
    width:300px;
    height:80px;
    padding-left:20px;
    box-sizing: border-box;
    /* border:1px solid red; */
}

.latest_news .conent-box1>div:last-child>p:last-child{
    font-size:12px;
    color:#a4a4a4;
    padding-top:13px;
}


/* 底部 */
.footer{
    width:100%;
    height:43px;
    line-height: 47px;
    margin: 0 auto;
    background-color:#66c5b4 ;
    /* border:1px solid red; */
    /* text-align:right; */
    color:white;
    font-size: 10px;
}

.footer>div{
    margin: auto;
    text-align: right;
    width:1024px;
    /* border:1px solid red; */

}

.footer>div>span{
    border-left: 1px solid white;
    padding:0 24px;
}

.footer  .footer-1{
    border-left: none;
}

素材已删！！！

基础网页布局练习1-博文尚美
m0_37643322的博客
09-24 1425
1.项目介绍 博文尚美是一个设计网站, 此项目由html + css 布局完成页面，对前端基础知识的入门及掌握有非常好的提升效果，对html和css的使用及布局的体验能够建立起强大的信心。 2.项目相关知识点 HTML + CSS 盒子模型 + 浮动 + 定位 部分H5标签和C3属性 3.项目演示图 4.页面布局整体思路 (1).确定网页结构 结构分为5个部分：头部、服务范围、客户案例、最新资讯、尾部 (2).确定页面的版心和通栏 通栏：自适应浏览器宽度 版心：给一个固定宽度，不需要给高度，它可
前端HTML5+CSS3静态页面开发-博文尚美
weixin_45997173的博客
07-25 8213
前端html5+css3静态页面开发-博文尚美 项目介绍 博文尚美是一个设计网站, 此项目由html + css 布局完成页面，对前端基础知识的入门及掌握有非常好的提升效果，对html和css的使用及布局的体验能够建立起强大的信心。 项目相关知识点 HTML + CSS 盒子模型 + 浮动 + 定位 部分H5标签和C3属性 项目演示图 实现步骤 1.在新建 index.html 中，创建基本框架，在标签里面使用标 签引入 index.css。 2.清除 css 默认样式，添加预设样式。代码如下：
网页制作练习-博文尚美页面
qq_69401634的博客
07-30 1233
本文包含博文尚美网页首页的仿制流程
HTML/CSS——PC端博文尚美网页
热门推荐
无限迭代中......
08-04 1万+
原作品效果： 仿制品效果： 代码： HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...
博文尚美首页html,博文尚美首页制作
weixin_35473679的博客
06-18 948
涉及到的知识点PC端的布局通栏container-fluid：自适应浏览器的宽度版心container：固定一个宽度，并且让容器居中margin值类型auto：设置为浏览器边距(会依赖于浏览器)确切数值百分比外边距简写margin:25px 50px 75px 100px;//上边距为25px,右边距为50px,下边距为75px,左边距为100px(顺时针)margin:25px 50px 75p...
网页制作小样例之博文尚美
ENDlesslove0的博客
07-31 376
网页制作样例实现
博文尚美首页psd.psd
02-02
这是一个用来练习PC端操作的psd文件
博文尚美案列练习
LiuYing_LY的博客
01-21 409
小圆点在如图所示位置时 CSS代码如下所示 小圆点如图所示位置时 CSS代码如下所示 translateX：水平方向移动居中 translateY：垂直方向移动居中 小圆点如图所示 CSS代码如下 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown
161403123尚美君实验报告1
08-08
【尚美君的Linux程序设计实验报告——记忆仓库微信小程序】 在本次实验中，尚美君同学开发了一款名为“记忆仓库”的微信小程序，旨在帮助用户有效地管理和回顾他们的记忆。这款小程序结合了计算机科学与技术的专业...
博文尚美
wangxiaoyun_的博客
10-19 882
博文尚美 在此次结合应用html和css的基础样式开发“博文尚美”页面中，我遇到了一些困难，通过上网查阅资料和反复实践操作得到了结论，解决了问题。 查阅解决问题内容具体如下： .clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容； content: “.”; <----内容为“.”就是一个英文的句号而已。也可以不写。 display: block; <----加入的这个元素转换为块级元素。 clear: both; <----清除左右两边浮
Cef3博文配套源代码
12-28
Cef3博文的配套源代码，注意其中没有放 Cef3 库的资源（因为太大了...）。建议配合博文一起查看。博文地址：http://blog.csdn.net/u011304970/article/details/77592775
博文尚美前端页面html
xiaoquan1997的博客
06-22 471
博文尚美主页自己以前写的
新建html5模块格式,前端HTML5+CSS3静态页面开发-博文尚美
weixin_42339759的博客
06-07 354
前端html5+css3静态页面开发-博文尚美项目介绍博文尚美是一个设计网站, 此项目由html + css 布局完成页面，对前端基础知识的入门及掌握有非常好的提升效果，对html和css的使用及布局的体验能够建立起强大的信心。项目相关知识点HTML + CSS盒子模型 + 浮动 + 定位部分H5标签和C3属性项目演示图 实现步骤1.在新建 index.html 中，创建基本框架，在标签里面使用...
博文尚美相关源码，网页展示
qq_64131064的博客
07-31 577
代码】博文尚美相关源码，网页展示。
HTML-CSS静态页面实现-仿博文尚美首页
weixin_44730244的博客
04-26 1010
HTML代码： <!DOCTYPE html> <html> <head> <!-- https://www.17sucai.com/preview/330046/2015-08-19/%E5%8D%9A%E6%96%87%E5%B0%9A%E7%BE%8E/index.html https://www.zcool.com.cn/work/ZNjIzOTEwNA==.html?switchPage=on --> <meta ch
博文尚美整页制作
Xiaoxian____的博客
07-30 231
练习
今日学习之博文尚美首页
Pursuit53的博客
03-02 5024
博文尚美首页
博文尚美页面的粗糙展现（练习）
OrdnAry的博客
08-05 404
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0
初涉网页设计
GJ_straysoul的博客
11-18 680
我的前面是未打下的江山
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

YI Chen521

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

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

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

打赏作者

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

抵扣说明：

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

余额充值