css页面布局模板？h5页面制作模板
大家好，如果您还对css页面布局模板不太了解，没有关系，今天就由本站为大家分享css页面布局模板的知识，包括h5页面制作模板的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
切割网页后怎么变成div+css布局
PS是设计工具出平面设计稿用的。不推荐使用PS来切片转HTML页面，直接生成的页面，就是满屏幕的表格，把你做的切片放在每个小方格里而已。
我的方法是：制作布局前，在PS当中打开标尺，设置单位为：像素，然后添加辅助线吧！
横向纵向的辅助线，把你的平面稿布局给分开，分析完你的平面稿以后，在开始制作页面。
要用DW制作页面，其中平面稿中的页面布局通过DIV+CSS来实现，然后再把必要的图片通过PS切出来，加入到网页当中。
原则：1符合web标准 2用尽可能少的图片，来达到原来平面设计稿的效果。3充分考虑到用户的使用习惯和阅读习惯
布局当中，用到图片的技巧比较多，比较细碎，不能一一列举了。简单说几个：
1 UL列表前面的小黑点，可以替换成图片
2背景图片可以切出来一小块，利用平铺来铺满指定区域
3按钮图片要有多个状态，可以设计多个图片按钮来达到效果
4至于用图片替换链接文字之类的，楼主随着CSS技能的提高慢慢就会掌握了，在此就不再赘述了。
这些都是静态页面的部分，不涉及到很多的编程和交互特效。如果需要特效或者为页面润色，可以用flash，也可以用jQuery来为你的页面增色，需要有编程基础。
制作静态页面不只是需要PS设计能力，还要有HTML,CSS的基础知识，两者结合在一起才能完成静态页面的设计和制作。从楼主的提问大概看出，楼主对于HTML方面的知识比较欠缺。建议去找一套专门的页面布局教程看一看。
下面随手搜了一个教程网站，仅供参考
css网页的几种布局实例
本文主要介绍了浅谈css网页的几种布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
2018年已经过了一周，总结一下2017年在公司wiki上写的一篇关于css布局的知识，当时也借鉴了几个大神写的css布局知识，和自己在项目中遇到的坑。废话不多说。请看以下的干货。
1、左边固定，右边自适应布局的两种实现方式
效果图如下：
大屏展示：
小屏展示：
第一种实现方式通过负边距与浮动实现左边固定，右边自适应的布局。主要代码如下：
<style type="text/css">
.left{
float: left;
width: 100%;
height: 200px;
background-color: red;
}
.left-content{
margin-left: 30%;
}
.right{
float: left;
width: 30%;
margin-left:-100%;
height: 200px;
background-color: green;
}
.layout0{
clear: both;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<body>
<p id="body">
<p class="left">
<p class="left-content">
设置子元素的margin,然后父元素必须浮动。
用父元素包裹，主要是因为right会覆盖left，从而导致left内容不可以看到，如果直接在left上设置margin或者padding会导致布局变化，因此只能再用一个p包裹内容，并且去除right覆盖的宽度。
</p>
</p>
<p class="right">-margin必须大于或等于自身的宽度才会上移</p>
<p class="layout0"></p>
</p>
</body>实现过程中需要注意的是:
1.自适应的容器需要容器包裹住，否则容器内的内容会被覆盖。
2.right容器的负边距必须大于或等于自身的宽度才会上移。
3.如果right容器负边距等于自身的宽度它会靠右对齐，如果负边距等于-100%，则会靠左对齐。
第二种通过浮动布局来实现左边固定，右边自适应的布局
主要的代码如下：
<style type="text/css">
.left{
float: left;
width: 200px;
height: 200px;
background-color: yellow;
}
.right{
padding-left: 200px;
height: 200px;
background-color: red;
}
@media(min-width: 650px) and(max-width: 1000px){
.left{
width: 150px;
}
.right{
margin-left: 150px;
}
}
@media(max-width: 640px){
.left{
width: 100px;
}
.right{
margin-left: 100px;
}
}
</style>
<body>
<p id="main">
<p class="left">左边固定宽度，右边自适应</p>
<p class="right"></p>
</p>
</body>实现过程中需要注意的是： 1. left需要脱离文档流，而right只需要正常显示就可以。
2.left只是覆盖在right上边，因此想要让right内容完整显示需要给right padding-left或者margin-left。
大屏展示：
小屏展示：
主要代码如下：
<style type="text/css">
#head{
height: 200px;
background-color: yellow;
}
#body{
width: 100%;
float: left;
}
.main{
background-color: green;
min-height: 200px;
margin: 0 210px;
}
.left{
float: left;
background-color: red;
width: 200px;
height: 200px;
margin-left:-100%;
}
.right{
float: right;
background-color: blue;
width: 200px;
height: 200px;
margin-left:-200px;
}
#footer{
clear: both;
height: 200px;
background-color: orange;
}
</style>
<body>
<p id="head">即左右固定，中间自适应，它可以利用margin-left为负数来实现，它的实现原理就是margin为负值可以改变float元素的排列位置</p>
<p id="body">
<p class="main">当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移</p>
</p>
<p class="left"></p>
<p class="right"></p>
<p id="footer"></p>
</body>实现过程中需要注意:
1.中间自适应的p需要放在left和right容器前面并且内容p需要用父容器包裹
2.left和right容器向同一个方向浮动。
主要代码如下：
<style type="text/css">
#head{
height: 200px;
background-color: yellow;
}
#body{
overflow: hidden;
}
.left{
float: left;
background-color: red;
width: 200px;
height: 200px;
}
.right{
float: right;
background-color: blue;
width: 200px;
height: 200px;
}
.main{
background-color: green;
height: 200px;
margin: 0 210px;
}
#footer{
clear: both;
height: 200px;
background-color: orange;
}
</style>
<body>
<p id="head">左右固定宽度并且向两边浮动，中间的p设置两边的margin</p>
<p id="body">
<p class="left"></p>
<p class="right"></p>
<p class="main">该方案有一个缺陷，在小屏幕情况下回导致right被挤下去，main没有了</p>
</p>
<p id="footer"></p>
</body>实现过程中需要注意:
1.该方式只需要注意中间自适应的p需要放在left和right容器的后面。
2.left和right容器向两边浮动。
主要代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>使用flex实现“双飞翼布局”</title>
</head>
<style type="text/css">
#main{
display: flex;
display:-webkit-flex;//谷歌浏览器加前缀
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.left{
flex: 0 0 auto;
width:100px;
height: 200px;
background-color: red;
word-wrap: break-word;
overflow: hidden;
}
.main{
flex: 1 1 auto;
height: 200px;
background-color: green;
}
.right{
flex: 0 0 auto;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
<body>
<p id="main">
<p class="left">flex语法我参照了阮一峰关于flex语法介绍 ;
<p class="main"></p>
<p class="right"></p>
</p>
</body>
</html>如果未了解过flex布局请移至文末点击链接查看阮一峰大神写的关于flex语法
3、定位布局
这边就不絮絮叨叨的讲一些基础的css定位知识了（ps:不会的请自行到w3c官网查阅），我主要来讲解一下工作中遇到的坑。以免其他人和我一样掉入坑中。
第一：使用多个fixed时，注意自己需要基于什么定位，因为如果父级有用transform属性时，可能会导致子元素的fixed基于父元素容器定位，而不是基于body定位。效果如下：
在上图中我可以发现中间黑色的小框是基于父级来定位，并且宽度也基于父容器的50%。详细的请看下面代码：
<!DOCTYPE html>
<html>
<head>
<title>关于position的定位的坑</title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
i{
font-style: normal;
cursor: pointer;
}
#delete-button{
position: absolute;
left: 45%;
top: 45%;
text-align: center;
vertical-align: middle;
height: 50px;
margin: auto;
cursor: pointer;
}
#delete-button> i{
display: inline-block;
width: 32px;
height: 32px;
border-radius: 16px;
background-color: orange;
color: red;
font-size: 32px;
vertical-align: middle;
line-height: 28px;
}
/*第一个模态框的样式*/
#layout{
display: none;
width: 100%;
height: 100%;
}
/*使用flex布局水平竖直居中*/
/*#layout-box{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
display:-webkit-flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.3);
}*/
/*使用postion和 transform水平垂直居中*/
#layout-box{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.modal-dialog{
position: absolute;
left: 50%;
top: 50%;
width: 500px;
height: 200px;
border-radius: 10px;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
background-color:#fff;
}
.dialog-title{
text-align: center;
color:#333;
font-size: 28px;
margin-bottom: 10px;
}
.dialog-content{
text-align: center;
color:#666;
font-size: 18px;
}
.dialog-button{
margin-top: 20px;
width: 100%;
color:#333;
}
.dialog-button>.button-box{
display: inline-block;
width: 48%;
text-align: center;
}
.button-box span{
display: inline-block;
padding: 10px;
color:#fff;
border-radius: 6px;
cursor: pointer;
}
#confirm{
background-color:#27ad9a;
}
#cancel{
background-color: red;
}
/*添加按钮的样式*/
#add-button> i{
display: inline-block;
width: 32px;
height: 32px;
border-radius: 16px;
background-color:#27ad9a;
color:#fff;
font-size: 32px;
vertical-align: middle;
line-height: 28px;
text-align: center;
}
#add-button{
display: inline-block;
cursor: pointer;
}
/*第二个模态框的样式*/
.layout2{
display: none;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.2);
}
.modal-dialog2{
position: fixed;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
border-radius: 10px;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
background-color: rgba(0,0,0,0.2);
}
.modal-dialog2> span{
display: block;
}
.modal-text{
float: left;
}
#close{
color: red;
font-size: 24px;
float: right;
cursor: pointer;
}
</style>
<body>
<p id="delete-button"><i>-</i>删除</p>
<p id="layout">
<p id="layout-box">
<p class="modal-dialog">
<p class="dialog-title">提示</p>
<p class="dialog-content">是否删除该项,点击确定</p>
<p class="dialog-button">
<p class="button-box">
<span id="confirm">确定</span>
</p>
<p class="button-box">
<span id="cancel">取消</span>
</p>
</p>
<p id="add-butto
如何布局网站页面
我做设计一般是这样的：
1、列出所需要的栏目及内容；
2、在PS（photoshop）中规划好布局图；然后设计出需要的样子；
3、在PS中切好图导入Dreamweaver中制作；
4、定制css样式,调试到理想完毕。
布局这些说起来很多了，你可以看看其他相近网站的一般布局，最好符合个人使用习惯，这样比较合理。页面简洁美观主要还是看你整体布局和色块安排上，多参考一些网站模板会很有收获的。
以下是相关资料：：
版面布局的步骤：
一.草案
新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，你可以尽可能的发挥你的想象力，将你想到的"景象"画上去(我们建议您用一张白纸和一支铅笔，当然用作图软件photoshop等也可以)。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定一个满意的作为继续创作的脚本。
二.粗略布局
在草案的基础上，将你确定需要放置的功能模块安排到页面上。(注：功能模块我们在"首页设计-引子"中提过，主要包含网站标志,主菜单,新闻,搜索,友情链接,广告条,邮件列表,计数器,版权信息等)。注意，这里我们必须遵循突出重点、平衡谐调的原则，将网站标志，主菜单等最重要的模块放在最显眼，最突出的位置，然后在考虑次要模块的排放。
三.定案
将粗略布局精细化，具体化。（靠你的智慧和经验，旁敲侧击多方联想，才能作出具有创意的布局。）
在布局过程中，我们可以遵循的原则有：
1、正常平衡---亦称"匀称"。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。
2、异常平衡---即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。
3、对比---所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。
4、凝视---所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。
5、空白---空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体显网页的格调十分有效。
以上的设计原则，虽然枯燥，但是我们如果能领会并活用到页面布局里，效果就大不一样了。比如：
○网页的白色背景太虚，则可以加些色快；
○版面零散，可以用线条和符号串联；
○左面文字过多，右面则可以插一张图片保持平衡；
○表格太规矩，可以改用导角试试。
经过不断的尝试和推敲，你的网页一定会亮丽起来的哦:)
看看我们经常用到的版面布局形式：
1."T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母"T",所以我们称之为"T"形布局。这是网页设计中用的最广返的一种布局方式。(图略)
这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。
2."口"型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。(图略)
这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。
3."三"型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。
4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。
5.POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见：漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。
以上总结了目前网络上常见的布局，其实还有许许多多别具一格的布局，关键在于你的创意和设计了。对于版面布局的技巧，这里提供四个建议，您可以自己推敲：
1.加强视觉效果
2.加强文案的可视度和可读性
3.统一感的视觉
4.新鲜和个性是布局的最高境界
网页的色彩是树立网站形象的关键之一，色彩搭配却是网友们感到头疼的问题。网页的背景，文字，图标，边框，超链接.，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢阿捷这里谈一些心得，希望对你有所启发。
文章分享结束，css页面布局模板和h5页面制作模板的答案你都知道了吗？欢迎再次光临本站哦！