博文尚美前端页面html

已于 2022-06-22 17:12:05 修改
阅读量320 收藏 2
点赞数
文章标签： 前端 html css
于 2022-06-22 17:06:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoquan1997/article/details/125413005
版权 
<!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>Document</title>
    <link rel="stylesheet" href="css/rest.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/bwhome.css">


</head>
<body>
    <div id="header">
        <div class="nheader">
            <div class="logo"><a href=""><img src="images/博文尚美首页_03.jpg" alt=""></a></div>
            <div class="nav">
                <p>
                    <a href="#">HOME</a>
                    <a href="#">ABOUT</a>
                    <a href="#">PROTFOLIO</a>
                    <a href="#">SERVICE</a>
                    <a href="#">NEWS</a>
                    <a href="#">CONTACT</a>
                </p><span></span>
            </div>
        </div>
    </div>
    <div id="banner">
        <div class="imgbox">
            <a href="#"><img src="images/博文尚美首页_07.jpg" alt=""></a>
        </div>
        
        
    </div>
    <div id="main">
        <div class="sizi">
            <div class="one">
                <h1>服务范围</h1>
                <p>our services</p>
            </div>
            <ul class="map">
                <li><a href="#"><img src="images/博文尚美首页_10.jpg" alt=""></a>
                <h2>1.WEB DESIGN</h2><p>企业品牌网站设计/手机网站制作<br>
                    动画网站创意设计</p>
                </li>
                <li><a href="#"><img src="images/博文尚美首页_12.jpg" alt=""></a>
                <h2>2.GRAPHIC DESIGN</h2><p>标志logo设计/产品宣传册设计<br>企业广告/海报设计</p></li>
                <li><a href="#"><img src="images/博文尚美首页_14.jpg" alt=""></a>
                <h2>3.E-BUSINESS PLAN</h2><p>淘宝/天猫装修设计及运营推广<br>企业微博、微信营销</p>             
                </li>
                <li><a href="#"><img src="images/博文尚美首页_16.jpg" alt=""></a>
                <h2>MALBOXAGENTX</h2><p>腾讯/网易企业邮箱品牌代理<br>个性化邮箱定制开发</p>
                
                </li>
            </ul>
        </div>
        
    </div>
    <div id="box3">
        <div class="p1">
            <p class="p2">{&nbsp;客户案例&nbsp;}</p>
            <p>With the best professional technology, to design the best innovative web site</p>
        </div>
        <div class="p4">
            <ul class="p5">
                <li><a href="#"><img src="images/博文尚美首页_23.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/博文尚美首页_25.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/博文尚美首页_27.jpg" alt=""></a></li>
            </ul>
        </div>
        <div class="p6">
            <div class="p7">
                <ul><li><a href="#"><img src="images/t_03.jpg" alt=""></a></li></ul></div>
        </div>
            </div>
        </div>
        <div id="int">
            <div class="a1">
                <div class="b1">
                    <h2 class="b3">最新资讯</h2>
                    <p class="b4">TEHLATEST NEWS</p>
                   
                </div>
                <div class="theer">
                    <div class="bb"><a href="#"><img src="images/博文尚美首页_37.jpg" alt=""></a></div>
                    <div class="cc">
                        <div class="ee">
                            <div class="yy">
                                <h2 class="si">o9</h2>
                                <p class="oo">jan</p>
                            </div>
                            <div class="il"><h3 class="h3">网站排名进入前三的技巧说明</h3>
                                <p2 class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎</p2>
                                <p2 class="p2">首页，更不用说进首页前三了。那么网站优..</p2></div>
                        
                           
                        </div>
                        <div class="ff">
                            <div class="yy">
                                <h2 class="si">o9</h2>
                                <p class="oo">jan</p>
                            </div>
                           <div class="il"><h3 class="h3">网站排名进入前三的技巧说明</h3>
                            <p2 class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎</p2>
                            <p2 class="p2">首页，更不用说进首页前三了。那么网站优..</p2></div>
                        </div>
                    </div>
                    <div class="dd">
                        <div class="ee">
                            <div class="yy">
                                <h2 class="si">o8</h2>
                                <p class="oo">jan</p>
                            </div>
                           <div class="il"><h3 class="h3">网站排名进入前三的技巧说明</h3>
                            <p2 class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎</p2>
                            <p2 class="p2">首页，更不用说进首页前三了。那么网站优..</p2></div>
                        </div>
                        <div class="ff">
                            <div class="yy">
                                <h2 class="si">o9</h2>
                                <p class="oo">jan</p>
                            </div>
                            <div class="il"><h3 class="h3">网站排名进入前三的技巧说明</h3>
                                <p2 class="p2">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎</p2>
                                <p2 class="p2">首页，更不用说进首页前三了。那么网站优..</p2></div>
                        </div>
                    </div>
                </div>
               
          
            
            
               
                   
    
    
               
                
           
            </div>







        </div>
    </div>
    <div id="box4">
        <div class="footer">
            <div class="lli">
                <a href="#" class="zi">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</a>
            </div>
            <div class="llo">
                <ul class="mmm">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            





        </div>
    </div>
</body>
</html>

css代码如下

* {
    margin: 0;
    /* 内边距上右下左0 */
    padding: 0;
    /* 外边距上右下左0 */
}

h1,h2,h3,h4,h5,h6,b,strong {
    font-weight: normal;
    font-size: 100%;
    /* 粗体，取消 */
}

li {
    list-style: none;
}
i,em{
    font-style: normal;
}
a{
    text-decoration: none;
}
.clearfix{
    *zoom: 1;

}
.clearfix::after{
    content:"";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;}
    #main{
        width: 100%;
        height: 398px;
        background: #ffffff;
        

    }
    #main .sizi{
        width: 1082px;
        /* height: 109px; */
        margin: 0 auto;
        text-align: center;
    }
    .one{
        width: 1082px;
        height: 54.5px;
        margin-top: 54.5px;
        margin: 0 auto;
        text-align: center;
        margin-top: 38px;
    }
    .one p{
        color:#acacac;
        font-size: 14px;
    }
    .map{
        width: 1082px;
        height: 289px;
       
        margin: 0 auto;}
        .map li{
            float:left ;
            width: 202px;
            height: 208px;
            margin: 0 23px;
        }
        .map li h2{
            font-size: 18px;
            color: #434343;
        }
        .map li p{
            font-size: 14px;
            color: #777;
        }
        #box3{
            height: 460px;
            width: 100%;
            background-color: #f8f8f8;
            margin-top: 56px;
        }
        #box3 .p1{
            width: 1082px;
            background-color: #f8f8f8;
            margin: 0 auto;
            height: 82px;
            padding-top: 56px;
        }
        #box3 .p1 .p2{
            color: #8dd3c6;
            font-size: 20px;
            text-align: center;
        }
        #box3 .p1 p{
            font-size: 14px;
            color: #9f9f9f;
            text-align: center;
        }
        .p5{
            margin: 0 auto;
            width: 1082px;
            height: 180px;
        }
        #box3 .p4 .p5 li {
            float: left;
            overflow: hidden;
            margin: 0 10px;

        }
        .p6 .p7{
            width: 1082px;
            height: 198px;
            margin: 0 auto;
            background-position: center;
        }
        .p6 .p7 ul li {
        margin-top: 78px;
        float: right;
        margin-right: 453px;
      
        }
        .p6 .p7 ul li img{
            background-position: center;
        }
        #int{
            height: 452px;
            background-color: #ffffff;
            width: 100%;
              }
        #int .a1{
            width: 1082px;
            height: 452px;
            margin: 0 auto;
            margin-top: 64px;
        }
       #int .a1 .theer{
           width: 1082px;
           height: 196px;
           background:#ffffff;
           margin-top: 58px;
       }
       #int .a1 .theer .bb{
           width: 233px;
           height: 196px;
           float: left;
       }
       #int .a1 .theer .cc{
           width: 424.5px;
           height: 196px;
           float: left;
       }
       #int .a1 .theer .dd{
           width: 424.5px;
           height: 196px;
           float: left;
       }
       .ee{
           height: 80px;
           width: 424.5px;
       }
       .ff{
           height: 80px;
           width: 424.5px;
           margin-top: 30px;
       }
      .yy{
          width: 80px;
          height: 80px;
          text-align: center;
          float: left;
          
      }
      .ee .si{
          font-size: 39px;
          color: #66c5b4;
      }
      .ee .oo{
          font-size: 20px;
          color: #999999;
      }
      .ff .si{
        font-size: 39px;
        color: #66c5b4;
      }
      .ff .oo{
        font-size: 20px;
        color: #999999;
      }
      .il{
          width: 344.5px;
          height: 80px;
          margin-left: 80px;
          
      }
      .il .h3{
        font-size: 14px;
        color: #3f3f3f;
      }
      .il .p2{
          font-size: 12px;
          color: #a4a4a4;
      }
      
      .cc .yy .h3{
          font-size: 14px;
      }
      .cc .yy  .p2{
          font-size: 12px;
      }
 #int .b1{
            text-align: center;
            height: 45.6px;
            width: 1082px;
            
        }
        #int .b3{

            font-size: 20px;
            color:#434343;
        }
        #int .b4 {

            font-size: 14px;
            color: #9f9f9f;
        }
        #box4{
            width: 100%;
            height: 54px;
            background-color: #66c5b4;
        }
        #box4 .footer{
            width: 1082px;
            height: 54px;
            margin: 0 auto;
        }
        #box4 .footer .lli{
            width: 390px;
            height: 54px;
            float: left;
            margin-top: 10px;
        }
        .zi{
            font-size: 12px;
            color: #ebf7f5;
            
        }
        #box4 .footer .llo{
            width: 273px;
            height: 54px;
            float: left;
            margin-left: 419px;
            margin-top: 17px;
        }
        .llo .mmm li{
            float: left;
            font-size: 12px;
            padding: 0 13px;  
            background: url(../images/博文尚美dibu_03.jpg) no-repeat right;
        }
        .llo .mmm li a{
            color: #ebf7f5;
        }
#banner{
    width:100%;
    height: 470px;
    background-color: #d1d1d1;
    /* margin-bottom: 38px; */
}

#banner div{
    width: 1082px;
    height: 470px;
    margin: 0 auto;
}
#banner a img{
    width: 100%;
    height: 470px;

}
* {
    margin: 0;
    /* 内边距上右下左0 */
    padding: 0;
    /* 外边距上右下左0 */
}

h1,h2,h3,h4,h5,h6,b,strong {
    font-weight: normal;
    font-size: 100%;
    /* 粗体，取消 */
}

li {
    list-style: none;
}
i,em{
    font-style: normal;
}
a{
    text-decoration: none;
}
.clearfix{
    *zoom: 1;

}
.clearfix::after{
    content:"";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
}
body,html{
    height: 100%;
    height: 100%;
}
#header{
    background: #eeeeee;
    height: 80px;
}
#header .nheader{
    width: 1082px;
    height: 80px;
    
    margin: 0 auto;
}
#header .nheader .logo{
    float: left;
    margin-top: 20px;
}
.nav{
   
    height: 80px;
}
 .nav p{
    height: 80px;
    width: 920px;
    float: left;


    
}

.nav p a{
    font-size: 14px;
    
    float: right;
    margin: 32px 0 0 0;
    margin-left: 42px; 
}
.nav p span{
    position: absolute;
    vertical-align: middle;
}

快点码啊
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
创建博文尚学网页
m0_70990872的博客
07-31 159
创建博文尚学网页
博文尚美首页psd.psd
02-02
这是一个用来练习PC端操作的psd文件
今日学习之博文尚美首页
Pursuit53的博客
03-02 4856
博文尚美首页
网页制作练习-博文尚美页面
qq_69401634的博客
07-30 938
本文包含博文尚美网页首页的仿制流程
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"&...
博文尚美相关源码，网页展示
qq_64131064的博客
07-31 478
代码】博文尚美相关源码，网页展示。
161403123尚美君实验报告1
08-08
Linux程序设计实验报告题目：记忆仓库微信小程序开发专业：计算机科学与技术班级：2016级 硬件一班姓名：尚美君学号：161403123目录一、进入记忆仓库
尚美雅居整合推广策略提案.pptx
10-21
尚美雅居整合推广策略提案.pptx
践行尚美教育 打造魅力班级.doc
09-17
践行尚美教育 打造魅力班级.doc
新建html5模块格式,前端HTML5+CSS3静态页面开发-博文尚美
weixin_42339759的博客
06-07 294
前端html5+css3静态页面开发-博文尚美项目介绍博文尚美是一个设计网站, 此项目由html + css 布局完成页面，对前端基础知识的入门及掌握有非常好的提升效果，对html和css的使用及布局的体验能够建立起强大的信心。项目相关知识点HTML + CSS盒子模型 + 浮动 + 定位部分H5标签和C3属性项目演示图 实现步骤1.在新建 index.html 中，创建基本框架，在标签里面使用...
Cef3博文配套源代码
12-28
Cef3博文的配套源代码，注意其中没有放 Cef3 库的资源（因为太大了...）。建议配合博文一起查看。博文地址：http://blog.csdn.net/u011304970/article/details/77592775
HTML-CSS静态页面实现-仿博文尚美首页
weixin_44730244的博客
04-26 908
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
博文尚美首页前端练习
Mr_Qin_AC的博客
02-23 288
博文尚美首页，对H5，css进行全面练习！
博文尚美首页html,博文尚美首页制作
weixin_35473679的博客
06-18 782
涉及到的知识点PC端的布局通栏container-fluid：自适应浏览器的宽度版心container：固定一个宽度，并且让容器居中margin值类型auto：设置为浏览器边距(会依赖于浏览器)确切数值百分比外边距简写margin:25px 50px 75px 100px;//上边距为25px,右边距为50px,下边距为75px,左边距为100px(顺时针)margin:25px 50px 75p...
博文尚美静态网页
wychh85的博客
09-30 494
##博文尚美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"&g
《博文尚美》实操作业笔记
SevenOne
08-25 517
01 项目准备工作 任务实施 下载软件 VS Code 安装软件 新建“博文尚美”文件夹 新建 index.html 新建 index.css 新建 image 文件夹 发现问题无 解决问题无 02 header部分的制作 任务实施 创建H5框架：在编辑器中输入英文 ！后按 Tab 键 链接外部 CSS 文件：使用 link 标签 设置默认样式（样式的公共部分） 设置logo、nev基本样式 知识点 a 标签的 color 属性设置为 inherit 表示继承父类元素的.
HTML5和CSS3归纳
从入门到放弃_nys的博客
10-02 1357
HTML5和CSS3归纳（仅供自己记录复习基础点）一、HTML5二、CSS3 一、HTML5 二、CSS3
前端HTML5+CSS3静态页面开发-博文尚美
weixin_45997173的博客
07-25 7920
前端html5+css3静态页面开发-博文尚美 项目介绍 博文尚美是一个设计网站, 此项目由html + css 布局完成页面，对前端基础知识的入门及掌握有非常好的提升效果，对html和css的使用及布局的体验能够建立起强大的信心。 项目相关知识点 HTML + CSS 盒子模型 + 浮动 + 定位 部分H5标签和C3属性 项目演示图 实现步骤 1.在新建 index.html 中，创建基本框架，在标签里面使用标 签引入 index.css。 2.清除 css 默认样式，添加预设样式。代码如下：
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 669
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值