大家好,今天小编来为大家解答以下的问题,关于css实现网页布局,css div布局效果图这个很多人还不知道,现在让我们一起来看看吧!
一、怎么进行divcss网页布局
在桌面建立一个index.htm的文件和main.css的文件,当然你也可以不用main.css的文件,但是为了方便操作,还是建一个吧。只要把记事本另存为就可以了。
做好这两个文件后我们把网页的基础代码写上去,并使index文件受到main.css的控制,我们右键选择用记事本打开index文件输入代码,并在head里写上<linkhref="main.css"type="text/css"rel="stylesheet">使它受到main.css控制
下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的,看上去温馨,我在main.css里写上*{background:FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的,表示已经受到css样式表的控制了。
下面我们进行布局一般网页都是3层一级,所以我们需要div布局了在body里面写一般我会先分为3层
<linkhref="main.css"type="text/css"rel="stylesheet">
<divid="top1"></div>
<divid="top2"></div>
<divid="top3"></div>
布局好后我们需要去定义属性了,这里我只是简单的定义了一下
top{background:FFFF99;height:1000px;width:800px;margin-left:auto;margin-right:auto}
top1{background:66FFFF;height:50px;width:800px;}
top2{background:FF00CC;height:400px;width:800px}
top3{background:FF9933;height:550px;width:800px}
定义好了我们打开预览一下看看,图片是不是居中和分成3块了。当然,颜色只是为了方便看清楚,可以不写。
其实做网页就是不断的画框,只要知道布局和定义属性就可以了,下面我们就整个做一下,因为我的有一些是一样的,可以用class调用,class=这个只是随便写的,你爱等于什么就等于什么
<linkhref="main.css"type="text/css"rel="stylesheet">
<divid="top1">这里都是我截图的照片</div>
<divclass=""></div>
<divclass=""></div>
<divclass="jingyan"></div>
<divclass="jingyan"></div>
下面我们再去定义他的属性,当然我只是简单的定义一下
top{background:FFFF99;height:1000px;width:800px;margin-left:auto;margin-right:auto}
top1{background:66FFFF;height:50px;width:800px;text-align:center;line-height:50px;font-size:30px}
top2{background:FF00CC;height:400px;width:800px}
top3{background:FF9933;height:550px;width:800px}
.{background:FF6666;height:380px;width:380px;float:left;margin:10px}
.jingyan{background:FFCC00;height:530px;width:380px;float:left;margin:10px;}
因为我这个是我截图相册的网页,下面我们就放照片吧,这里我偷个懒,把照片都放在桌面了,所以不用连接照片地址了。
<linkhref="main.css"type="text/css"rel="stylesheet">
<divid="top1">这里都是我老婆的照片</div>
<divclass=""><imgsrc="QQ图片20141212090452.jpg"></div>
<divclass=""><imgsrc="QQ图片20141212090346.jpg"></div>
<divclass="jingyan"><imgsrc="QQ图片20141212090224.jpg"></div>
<divclass="jingyan"><imgsrc="QQ图片20141212090255.jpg"></div>
如果图片不在同一层目录,就需要连接到图片地址
这样一个网页就做好了,如果需要制作精美的网页,就需要不断的进行div布局和css样式的规定了。
下面我来说说网页制作的定义,网页的制作只要会使用div不停的布局,不停的定义他的属性,基本静态的网页就是这样做出来的
二、css网页的几种布局实例
本文主要介绍了浅谈css网页的几种布局的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。
2018年已经过了一周,总结一下2017年在公司wiki上写的一篇关于css布局的知识,当时也借鉴了几个大神写的css布局知识,和自己在项目中遇到的坑。废话不多说。请看以下的干货。
1、左边固定,右边自适应布局的两种实现方式
第一种实现方式通过负边距与浮动实现左边固定,右边自适应的布局。主要代码如下:
<p class="left-content">
设置子元素的margin,然后父元素必须浮动。
用父元素包裹,主要是因为right会覆盖left,从而导致left内容不可以看到,如果直接在left上设置margin或者padding会导致布局变化,因此只能再用一个p包裹内容,并且去除right覆盖的宽度。
<p class="right">-margin必须大于或等于自身的宽度才会上移</p>
<p class="layout0"></p>
</body>实现过程中需要注意的是:
1.自适应的容器需要容器包裹住,否则容器内的内容会被覆盖。
2.right容器的负边距必须大于或等于自身的宽度才会上移。
3.如果right容器负边距等于自身的宽度它会靠右对齐,如果负边距等于-100%,则会靠左对齐。
第二种通过浮动布局来实现左边固定,右边自适应的布局
@media(min-width: 650px) and(max-width: 1000px){
<p class="left">左边固定宽度,右边自适应</p>
<p class="right"></p>
</body>实现过程中需要注意的是: 1. left需要脱离文档流,而right只需要正常显示就可以。
2.left只是覆盖在right上边,因此想要让right内容完整显示需要给right padding-left或者margin-left。
<p id="head">即左右固定,中间自适应,它可以利用margin-left为负数来实现,它的实现原理就是margin为负值可以改变float元素的排列位置</p>
<p class="main">当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移</p>
<p class="left"></p>
<p class="right"></p>
<p id="footer"></p>
</body>实现过程中需要注意:
1.中间自适应的p需要放在left和right容器前面并且内容p需要用父容器包裹
2.left和right容器向同一个方向浮动。
<p id="head">左右固定宽度并且向两边浮动,中间的p设置两边的margin</p>
<p class="left"></p>
<p class="right"></p>
<p class="main">该方案有一个缺陷,在小屏幕情况下回导致right被挤下去,main没有了</p>
<p id="footer"></p>
</body>实现过程中需要注意:
1.该方式只需要注意中间自适应的p需要放在left和right容器的后面。
<title>使用flex实现“双飞翼布局”</title>
display:-webkit-flex;//谷歌浏览器加前缀
<p class="left">flex语法我参照了阮一峰关于flex语法介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</p>
<p class="main"></p>
<p class="right"></p>
</html>如果未了解过flex布局请移至文末点击链接查看阮一峰大神写的关于flex语法
这边就不絮絮叨叨的讲一些基础的css定位知识了(ps:不会的请自行到w3c官网查阅),我主要来讲解一下工作中遇到的坑。以免其他人和我一样掉入坑中。
第一:使用多个fixed时,注意自己需要基于什么定位,因为如果父级有用transform属性时,可能会导致子元素的fixed基于父元素容器定位,而不是基于body定位。效果如下:
在上图中我可以发现中间黑色的小框是基于父级来定位,并且宽度也基于父容器的50%。详细的请看下面代码:
<title>关于position的定位的坑</title>
background-color: rgba(0,0,0,0.3);
/*使用postion和 transform水平垂直居中*/
background-color: rgba(0,0,0,0.3);
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
.dialog-button>.button-box{
background-color: rgba(0,0,0,0.2);
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);
<p id="delete-button"><i>-</i>删除</p>
<p class="modal-dialog">
<p class="dialog-title">提示</p>
<p class="dialog-content">是否删除该项,点击确定</p>
<p class="dialog-button">
<span id="confirm">确定</span>
<span id="cancel">取消</span>
三、如何用DIV+CSS进行网页样式布局
1、在html网页编辑中,对于新手来讲,接触最多的就是div+css;那么如何使用div+css就行网页简单布局呢
2、一个网页设计时,我们可以将一个页面设置为头部,中间,和底部三部分;头部有分为店招(logo)和导航等中间既内容部分,内容也可一个整体,也可左右分离,底部来页面结尾,一般写版权信息,友情链接等
3、店招:!doctype html html head meta charset="utf-8" title淘宝助手网/title style#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}#logo{ width:100%; height:100px; background:#003;}/style/head body div id="top" div id="logo"店招/div div id="nav"导航/div/div!--------头部------------ div id="centre" div id="centreLeft"内容左/div div id="centreRight"内容右/div/div!--------中间------------- div id="bottom"底部/div!-----------底部----------------/body/html
4、导航:!doctype html html head meta charset="utf-8" title淘宝助手网/title style a,ul,li,div,span,td{ padding:0; margin:0;}#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}#logo{ width:100%; height:100px; background:#003;}#nav{ width:100%; height:30px; background:#300} a{ text-decoration: none; display:block;den} ul li{list-style: none;}#navulli{ float:left; margin-left: 50px; line-height:30px;}#navullia{ color:#FFF; font-weight:900px}/style/head body div id="top" div id="logo"店招/div div id="nav" ul lia href="" title="" target="_blank"淘宝/a/li lia href="" title="" target="_blank"图片/a/li lia href="" title="" target="_blank"视频/a/li lia href="" title="" target="_blank"资料下载/a/li lia href="" title="" target="_blank"视频下载/a/li/ul/div/div!--------头部------------ div id="centre" div id="centreLeft"内容左/div div id="centreRight"内容右/div/div!--------中间------------- div id="bottom"底部/div!-----------底部----------------/body/html
5、!doctype html html head meta charset="utf-8" title淘宝助手网/title style a,ul,li,div,span,td{ padding:0; margin:0;}#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}#logo{ width:100%; height:100px; background:#003;}#nav{ width:100%; height:30px; background:#300} a{ text-decoration: none; display:block;} ul li{list-style: none;}#navulli{ float:left; margin-left: 50px; line-height:30px;}#navullia{ color:#FFF; font-weight:900px}/*******===================头====================************/#centre{ margin:0 auto; width:1200px; height:auto;}#centreLeft{ float:left; width:70%; height:500px;border:1px#333333 solid;}#centreRight{ float: right; width:27%; height:400px;border:1px#333333 solid;}/style/head body div id="top" div id="logo"店招/div div id="nav" ul lia href="" title="" target="_blank"淘宝/a/li lia href="" title="" target="_blank"图片/a/li lia href="" title="" target="_blank"视频/a/li lia href="" title="" target="_blank"资料下载/a/li lia href="" title="" target="_blank"视频下载/a/li/ul/div/div!--------头部------------ div id="centre" div id="centreLeft"内容左/div div id="centreRight"内容右/div/div!--------中间------------- div id="bottom"底部/div!-----------底部----------------/body/html
6、!doctype html html head meta charset="utf-8" title淘宝助手网/title style a,ul,li,div,span,td{ padding:0; margin:0;}#top{ width:1200px; height: auto; margin:0 auto; color:#FFF;}#logo{ width:100%; height:100px; background:#003;}#nav{ width:100%; height:30px; background:#300} a{ text-decoration: none; display:block;} ul li{list-style: none;}#navulli{ float:left; margin-left: 50px; line-height:30px;}#navullia{ color:#FFF; font-weight:900px}/*******===================头====================************/#centre{ margin:0 auto; width:1200px; height:auto; overflow: hidden}#centreLeft{ float:left; width:70%; height:500px;border:1px#333333 solid;}#centreRight{ float: right; width:27%; height:400px;border:1px#333333 solid;}/***********==============内容===================*******/#bottom{ margin:0 auto; width:1200px; height:200px; border:1px#333333 solid; margin-top:20px;}/***********==============底部===================*******//style/head body div id="top" div id="logo"店招/div div id="nav" ul lia href="" title="" target="_blank"淘宝/a/li lia href="" title="" target="_blank"图片/a/li lia href="" title="" target="_blank"视频/a/li lia href="" title="" target="_blank"资料下载/a/li lia href="" title="" target="_blank"视频下载/a/li/ul/div/div!--------头部------------ div id="centre" div id="centreLeft"内容左/div div id="centreRight"内容右/div/div!--------中间------------- div id="bottom"底部/div!-----------底部----------------/body/html
好了,关于css实现网页布局和css div布局效果图的问题到这里结束啦,希望可以解决您的问题哈!