实战项目：制作简单的页面布局

最新推荐文章于 2022-12-02 08:55:14 发布
最新推荐文章于 2022-12-02 08:55:14 发布
阅读量256 收藏 1
点赞数
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52957373/article/details/126086267
版权

CSS文档

此文档针对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:70px;}
#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; text-align:center;}
.area_title h2{height:20px; line-height:20px; font-size:20px; color:#363636;
    background:url(../img/title_bg.png) no-repeat center 7px; font-weight:normal;''
}
.area_title p{color:#9F9F9F; font-size:14px; line-height:34px;}

#foot{background:#66c5b4;}
#foot .container{height:54px; line-height:54px; font-size:12px; color:white;}
#foot div a{color:white; margin:0 10px;}

HTML文档

页面中的元素和内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
        #banner{position:relative;}
        #banner .banner_list{width:100%; height:469px; 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 li.active{opacity:1; z-index:10;}
        #banner .banner_list a{display:block; width:100%; height:100%;}
        #banner .banner_btn{width:100%; position:absolute; bottom:19px; z-index:20; font-size:0;
            text-align:center;
        }
        #banner .banner_btn li{display:inline-block; width:12px; height:12px; border:2px solid white;
            border-radius:50%; box-sizing:border-box; margin:0 6px; cursor:pointer;
        }
        #banner .banner_btn li.active{background:white;}


        #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:102px; height:102px; margin:0 auto;}
        /*#service .service_list li:nth-of-type(1) div{background-image:url(./images/web1.png);}*/
        /*#service .service_list li:nth-of-type(2) div{background-image:url(./images/graphic1.png);}*/
        /*#service .service_list li:nth-of-type(3) div{background-image:url(./images/e-bussiness1.png);}*/
        /*#service .service_list li:nth-of-type(4) div{background-image:url(./images/mail1.png);}*/
        #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;}


        #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:#66C584; 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:100%; color:white;}


        #news{min-height:450px; overflow:hidden;}
        #news .area_title{margin-top:65px;}
        #news dl{margin-top:48px;}
        #news dt{width:234px;}
        #news dd{width:846px;}
        #news .news_list{width:100%;}
        #news .news_list li{width:50%; float:left; margin-bottom:48px;}
        #news .news_date{width:71px; height:70px; border-right:1px solid #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{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">
    <div class="head_logo l">
        <a href="#">
            <img src="./img/logo.png" alt="博文尚美" title="博文尚美">
        </a>
    </div>
    <ul class="head_menu r">
        <li>
            <a href="#">HOME</a>
        </li>
        <li>
            <a href="#">ABOUT</a>
        </li>
        <li>
            <a href="#">PROTFOLIO</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(./img/banner.png)">
            <a href="#"></a>
        </li>
        <li style="background-image:url(./img/banner.png)">
            <a href="#"></a>
        </li>
        <li style="background-image:url(./img/banner.png)">
            <a href="#"></a>
        </li>
        <li style="background-image:url(./img/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 SERVICES</p>
    </div>
    <ul class="service_list">
        <li>
            <div style="background-image:url(./img/web1.png)"></div>
            <!--                1.WEB DESIGN-->
            <h3>1.web desin</h3>
            <p>
                企业品牌网站设计/手机网站制作
                <br>
                动画网站创意设计
            </p>
        </li>
        <li>
            <div style="background-image:url(./img/graphic1.png)"></div>
            <!--                2.GRAPHIC DESIGN-->
            <h3>2.graphic design</h3>
            <p>
                标志LOGO设计/产品宣传册设计
                <br>
                企业广告/海报设计
            </p>
        </li>
        <li>
            <div style="background-image:url(./img/e-bussiness1.png)"></div>
            <!--                3.E-BUSINESS PLAN-->
            　<h3>3.e-business plan</h3>
            <p>
                淘宝/天猫装修设置及运营推广
                <br>
                企业微博、微信营销
            </p>
        </li>
        <li>
            <div style="background-image:url(./img/mail1.png)"></div>
            <h3>4.mailboxagents</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 innovative web site</p>
        </div>
        <ul class="case_list clear">
            <li>
                <a href="#">
                    <img src="./images/20141121095528549.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/20141121095216750.png" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/20141121105856226.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>THE LATEST NEWS</p>
    </div>
    <dl>
        <dt class="l">
            <img src="./images/xs1.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="#">
                                flash网站制作的优缺点
                            </a>
                        </h3>
                        <p>虽然HTML5程序语言出现,大有逐渐代替flash网站的趋势
                            但是过于生硬的HTML5动画效果,始终...</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 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>

项目结构：
在这里插入图片描述

实现结果图：
在这里插入图片描述
（有兴趣的可以自己试一下）

大狗晋
关注
Spring Boot 大型线上商城项目实战教程:页面布局制作及跳转逻辑实现
sybh的博客
11-07 161
供用户浏览和使用的商城页面大家应该也都体验过，由于这些页面直接面向用户且功能并不通用，因此会有一些极具个性化的页面，这些页面不像后台管理系统中的页面具有通用性。往往会出现页面不同则排版不同的情景，甚至每一张页面都会有自己的布局和设计，与后台管理系统相比，商城端页面与页面之间的差异性太大，只能大致的抽取出三个功能区域：个人中心相关页面则会有侧边工具栏，其他基本都是三个页面区域。导航及个人信息：该区域主要用于放置商城的导航链接、登录信息、购物车等内容；功能区。
了解各种常见布局 企业级页面布局套路实战
m0_59708977的博客
03-16 578
什么是布局 简单来说就是HTML页面的整体结构或骨架，类似于传统的报纸或杂志中的排版；布局不是某个技术内容，而是一种设计思想；CSS知识体系的重中之重，早期以table为主(简单)，后来以技巧性布局为主(难)，现在有flexbox/grid(偏简单)，响应式布局是必备知识。 几种常见布局 table布局 父级容器—display: table 子级容器—display:table-cell 例子 <!DOCTYPE html> <html lang="zh_CN"> <he
day04-网页布局实战
weixin_44795592的博客
09-19 134
HTML+css
实战网页布局
weixin_30393907的博客
11-09 100
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实战网页布局</title></head><body topmargin="0" leftmargin="0"> <table border="...
Day02-网页布局实战
最新发布
金霖海的博客
12-02 569
网页布局实战
Flex Box页面布局实战课程-基本网格布局
杭州.黄老师
04-09 932
最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子布局很像，但是需要设置项目的自动缩放。 实战代码 &lt;!DOCTYPE&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;基本网格
Jquery练习1：制作简易的当当购物车页面.zip
08-27
在本实践项目中，我们将利用jQuery库来创建一个简单的当当购物车页面。...通过这个练习，我们可以深入理解jQuery的基本用法以及如何利用它来...这是一个很好的实战项目，有助于提升我们的jQuery应用能力和网页开发水平。
商城项目实战开发：底部信息区域布局与样式制作
# 1. 商城项目底部信息区域的重要性 ## 1.1 底部信息的作用和价值 底部信息区域在商城项目中是非常重要的一部分，它不仅提供了网站的基本信息和业务指引，还承载了网站的...## 1.3 设计一个用户友好的底部信息布局
CSS布局实战：爱心社区页面制作详解
在本次阶段任务中，您将深入学习并实践CSS布局技术，具体涉及制作爱心社区页面。这个任务涵盖了以下几个关键知识点： 1. Div+CSS布局技术概述： Div+CSS布局是网页设计中常用的布局方法，它利用HTML的`<div>`元素...
前端开发实战项目：静态页面构建解析
当提到"书店"相关的项目时，我们可以推测这些项目可能是尝试实现一个在线书店的前端页面，展示书籍列表、搜索、购物车、结账等功能。使用Bootstrap框架可以简化这些功能的实现过程，因为框架内已包含了用于制作表单...
实战网页布局心得（一）
步步拾遗
12-13 1416
实战心得： 1.父元素不能撑起浮动子元素带来的影响 在没有实战之前，经常会看到书里讲到浮动元素带来的影响，其中之一就是父元素不能撑起子元素，书里经常会举这个例子 然后书上就会介绍如何清除浮动来让父元素撑起子元素了，但是当不设置父元素的高度时，页面就只会显示这两个子元素，看起来好像达到了我们想要的效果， 那为什么还要清除浮动呢？？父元素没有包裹子元素其实还是会有影响的，会对父元素的兄弟元
Flex Box页面布局实战课程-圣杯布局
杭州.黄老师
04-09 932
圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。 HTML代码如下 &lt;body class="HolyGrail"&gt; &lt;header&gt;...&lt;/header&gt; &lt;div clas...
中关村diy栏目的一种布局
flyrose25的专栏
05-15 417
简易购物车项目
啦啦啦的博客
01-30 2874
本人的GitHub：戳我一下（该项目可以直接从GitHub clone下来使用） 简易购物车系统 项目简介： 做一个简易的购物车系统，来巩固一下最近学习的servlet 和 jsp的知识。 功能介绍： 用户登录后可以在购物大厅购物。 购物大厅中的商品以分页的形式展示出来。 用户可以将想要购买的商品加入购物车，并可以在购物车里修改，删除商品。 用户在决定购买的物品后可以提交订单。
Flex Box页面布局实战课程(网页移动端微信等)
01-22
主要讲解FlexBox的容器属性和容器内项目知识点的实战应用；flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content，flex-grow，flex-shrink，flex-basis，flex，align-self的实战应用
8小时学会HTML网页开发
03-18
一说学网页,学编程,大家都下意识觉得要吃苦,熬夜,哪有那么复杂,一定是你看错了教程. 挑一个阳光的午后,关掉手机,用6个小时,看看十八哥如何把一个公司的保安教会HTML,Div,CSS的.课程共8小时,57小集,轻松一点,你将马上学会.
一个简单的Java Web项目
热门推荐
Millet
04-23 4万+
一个简单的Java Web例子
div网页布局（做一个简单网页界面为例）
weixin_47314602的博客
08-05 5256
做一个简易的网页，分为多个模块，背景设置为自己喜欢的图片。添些图片和文字链接跳转，整体排列居中。eg:在中添加这个代码才可进行CSS工具的使用。 添加图片背景；透明度设置；模块大小位置设置；文字链接添加；如何添加各id的样式;...
HTML页面基本结构介绍
xiaoweids的博客
07-18 1839
如果用人体的结构来类比的话，这部分属于网页的头部，这部分中描述了HTML文件的各种属性和信息，如网页的标题，字符编码，是否启用缓存，引用的外部脚本和样式等等。之前介绍了HTML的编码规范，良好编码规范可以让我们的代码更加的易于维护，而今天要说的基本结构，则是能够让我们的页面正确的进行页面显示和SEO，正确的HTML格式加上良好的编码规范才是一个成熟合格的项目。HTML的主体，网页的文本、超链接、图像、表格、视频等所有在网页上显示的内容都写在这里。——用于告诉搜索引擎网页的关键字。——设置cookie设定。.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

大狗晋

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

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

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

打赏作者

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

抵扣说明：

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

余额充值