博文尚美实例

于 2022-07-31 21:06:01 发布
阅读量171 收藏 1
点赞数
文章标签： 前端 html servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64274578/article/details/126090249
版权 
<!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/common.css">
    <title>博文尚美</title>
</head>
<body>
    <div id="head" class="container">
        <div class="head_logo">
            <img src=".css/images/logo.png"  alt="博文尚美" title="博文尚美"> 
        </div>
        <ul class="head_menu">
                <li>
                    <a herf="#">HOME</a>
                </li>
                <li>
                    <a herf="#">ABOUT</a>
                </li>
                <li>
                    <a herf="#">PROTFOLIO</a>
                </li>
                <li>
                    <a herf="#">SERVICE</a>
                </li>
                <li>
                    <a herf="#">NEWS</a>
                </li>
                <li>
                    <a herf="#">CONTACT</a>
                </li>
        </ul>
    </div>
    <div id="banner" class="container_fluid">
        <ul class="banner_list">
            <li class="active" style="background-image: url(./image/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./image/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./image/banner.png)">
                <a href="#"></a>
            </li>
            <li style="background-image: url(./image/banner.png)">
                <a href="#"></a>
            </li>
        </ul>
        <ol class="banner_btn">
            <li class="active"></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>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>2.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>3.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </p>
            </li>
            <li>
                <div></div>
                <h3>4.WEB DESIGN</h3>
                <p>
                    企业品牌网站设计/手机网站制作
                    <br>
                    动画网站创意设计
                </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,to design the best innocative site</p>
            </div>
            <ul  class="case_list clear">
                <li>
                    <a href="#"><img src="./images/11.png" alt></a>
                </li>
                <li>
                    <a href="#"><img src="./images/11.png" alt></a>
                </li>
                <li>
                    <a href="#"><img src="./images/11.png" alt></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>TEN LATEST NEWS</p>
        </div>
        <dl>
            <dt class="l">
                <img src="./images/22.png" alt="">
            </dt>
            <dd class="l">
                <ul class="news_list">
                    <li>
                        <div class="news_date l">
                            <i>09</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页，
                                更不用说首页前三了。那么网站就...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>08</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页，
                                更不用说首页前三了。那么网站就...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>07</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名进入前三的技巧说明</a></h3>
                            <p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页，
                                更不用说首页前三了。那么网站就...</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>06</i>
                            <span>Jan</span>
                        </div>
                        <div class="news_text l">
                            <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 Culyure 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>
*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
img{display: block;}
a{text-decoration: none;color: #646464}
h1,h2,h3{font-size: 16px;}
body{font-family: Arial;}
.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; }
#foot{background-color: #66C5B4;}
#foot .container{height: 54px;line-height: 54px;font-size: 12px;color: white;}
#foot div a{color: white;margin: 0 10px;}
.area_title{margin-top: 61px; text-align: center;}
.area_title h2{font-size: 20px;line-height: 20px;height: 20px;color: #363636;font-weight: normal}
.area_title p{font-size: 14px;line-height: 34px;color: #9f9f9f;}

 

 

 

 

 

 

少熬夜活得久
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
网页制作练习
weixin_46176911的博客
02-19 478
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>传智播客</title> <link rel="stylesheet" href="index.css"> </head> <body>...
博文尚美首页psd.psd
02-02
这是一个用来练习PC端操作的psd文件
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"&...
博文尚美静态网页
wychh85的博客
09-30 515
##博文尚美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
一个网页制作 练习
weixin_30832143的博客
11-14 155
html代码部分： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head&gt...
博文尚美
wangxiaoyun_的博客
10-19 820
博文尚美 在此次结合应用html和css的基础样式开发“博文尚美”页面中，我遇到了一些困难，通过上网查阅资料和反复实践操作得到了结论，解决了问题。 查阅解决问题内容具体如下： .clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容； content: “.”; <----内容为“.”就是一个英文的句号而已。也可以不写。 display: block; <----加入的这个元素转换为块级元素。 clear: both; <----清除左右两边浮
161403123尚美君实验报告1
08-08
【尚美君的Linux程序设计实验报告——记忆仓库微信小程序】 在本次实验中，尚美君同学开发了一款名为“记忆仓库”的微信小程序，旨在帮助用户有效地管理和回顾他们的记忆。这款小程序结合了计算机科学与技术的专业...
尚美菜谱查询助手
11-29
尚美菜谱查询助手，软件用途见软件名，该软件经试用，均完美破解，欢迎大家选用，若遇到软件加密，则输入一个空格键便可解密。
践行尚美教育 打造魅力班级.doc
09-17
【践行尚美教育 打造魅力班级】 尚美教育的核心在于培养学生的审美素养，强调发现美、感受美、践行美的能力。在这个理念的指引下，湘江道小学四年一班致力于构建一个充满魅力的班级环境，让学生在其中茁壮成长。 ...
2021-2022年收藏的精品资料人因工程在苏州尚美国际化妆品有限公司的实例分析与优化.doc
09-17
精品教育教学资料
初学网页制作的练习作业
08-04
适合初学者参考的简单网页制作练习题源代码，包括标签练习到网页布局的所有部分。
米柚项目网页制作练习模板加素材html+css，适合初学者练习
01-20
前端HTML5网页制作项目模板，初学者练习使用比较适合，大神勿看！
个人静态网页 适合初学者练习网页设计
12-07
这是我自己做的个人静态主页。里面涉及了切片 flash。布局。适合初学者对网页的了解。
网站建设与管理练习-(完美版)
10-06
简答 1． 简述网站建设的流程。 规划设计: 确定主题、规划分析 、收集资料、撰写网站规划书 实施制作：版面设计、编辑排版、后台功能实现、代码整合 发布维护 ：网站测试、上传发布、日常维护 2． 简述电子商务网站系统的主要功能。
网页练习-制作简易网页
chujulu7854的博客
04-10 428
此次网页制作可以对前几次的网页制作做一次总结，总结一下前几次课程的学习，并且做一个小的检测。但是这一次的网页制作完成的并不是很好，总体的页面能够呈现出来，但是对于一些细节的修改还不够完善。 比如： 页面上方的图片大小一直调整不好，整个网页的布局显得...
博文尚美首页html,博文尚美首页制作
weixin_35473679的博客
06-18 833
涉及到的知识点PC端的布局通栏container-fluid：自适应浏览器的宽度版心container：固定一个宽度，并且让容器居中margin值类型auto：设置为浏览器边距(会依赖于浏览器)确切数值百分比外边距简写margin:25px 50px 75px 100px;//上边距为25px,右边距为50px,下边距为75px,左边距为100px(顺时针)margin:25px 50px 75p...
博文尚美相关源码，网页展示
qq_64131064的博客
07-31 495
代码】博文尚美相关源码，网页展示。
博文尚美前端页面html
xiaoquan1997的博客
06-22 353
博文尚美主页自己以前写的
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值