css网页代码div（CSS怎么实现div随着网页的大小变化而变化呢）

本文目录

• CSS怎么实现div随着网页的大小变化而变化呢
• 指导一个简单的css+div代码
• 主流网页DIV的边线的CSS样式代码是什么
• 山地车网页css+div代码怎么写
• 求一段div+css+js网页代码

CSS怎么实现div随着网页的大小变化而变化呢

《div class="one"》流体布局《/div》《div class="two"》布局《/div》

.one{width:80%; font-size:em(设置自体的大小，em可以让自体根据浏览器不同而更加优与阅读）;}

.two{width:20%;font-size:em;}

注：通过这样设置，就可能拉动浏览器，盒模型的宽度就会随着你的拉动而变大缩小，但也是有一定限度的。

扩展资料：

关于div的用法

1、《div》 可定义文档中的分区或节（division/section）。

2、《div》 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 《div》，那么该标签的作用会变得更加有效。

3、《div》 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 《div》 固有的唯一格式表现。可以通过 《div》 的 class 或 id 应用额外的样式。

不必为每一个 《div》 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 《div》 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

指导一个简单的css+div代码

首先，建议你一点，与其在上一个div里面用margin-bottom不如在下一个div里面用margin-top，因为margin-bottom经常会失效，而你这样的布局可以这样写《style》*{margin:0px;padding:0px;}body{margin:0pxauto;}.blue{margin:0pxauto;background:#34d5f2;padding:150px50px;margin-top:100px;width:500px;overflow:hidden;}.white{margin-top:50px;background:#fff;}.white1{width:400px;height:250px;}.white{width:400px;height:500px;margin-top:50px;}.white2{width:400px;height:50px;margin-top:50px;}.white,.white1,.white2{background:#fff;}《/style》《body》《divclass="blue"》《divclass="white1"》头部《/div》《divclass="white"》内容部分《/div》《divclass="white2"》尾部《/div》《/div》《/body》《/html》这样就是你要的效果了

主流网页DIV的边线的CSS样式代码是什么

整个的外围大框,是一个外围容器,通常用border来设置;其中的内容通常用列表《ul》 《li》1《/li》 《li》2《/li》《/ul》来做就你给的图来说,通常会做一个外围容器,其中内容会用ul列表;详细的css如下/*外围容器*/.bigbox{ float:left; width:250px; height:auto; margin:0; padding:10px; border:#e5e5e5 1px solid; /*这里是你问的主要问题,用这句实现*/}.bigbox ul li{ list-style:none; float:left; width:230px; height:60px;}.bigbox ul li .imgbox{ float:left; width:60px; height:45px;}.bigbox ul li .imgbox img{ margin:0; padding:0; border:none;}.bigbox ul li .content{ float:right; width:110px; height:45px;}css样式要配合div的页面布局来使用,对以上的css配合的html div布局如下;《div class="bigbox"》 《ul》 《li》 《div class="imgbox"》这里主要是放置图片内容《/div》 《div class="content"》这里主要是放置文字内容《/div》 《/li》 《li》 《div class="imgbox"》这里主要是放置图片内容《/div》 《div class="content"》这里主要是放置文字内容《/div》 《/li》 《/ul》《/div》

山地车网页css+div代码怎么写

css代码：《style type="text/css"》*{ padding:0; margin:0;}body{ padding-top:20px;}.header,.a1,.footer{ height:40px; width:958px; margin:0 auto; border:1px solid #000; text-align:center; clear:both;}.b,.c,.d{ width:960px; margin:0 auto; clear:both;}.footer{ border-top:none;}.a1{ height:100px; border:1px solid #000; border-top:none;}.b1,.b2,.b3,.b4{ float:left; width:239px; height:80px; border-right:1px solid #000; border-bottom:1px solid #000;}.b1{ width:238px; border-left:1px solid #000;}.c1,.c_center,.c_right{ float:left; height:260px; border-right:1px solid #000; border-bottom:1px solid #000;}.c1,.d_left{ width:298px; border-left:1px solid #000;}.c_center,.d_center{ width:459px;}.c_right,.d_right{ width:199px;}.c2{ height:129px; border-bottom:1px solid #000;}.c4{ height:171px; border-bottom:1px solid #000;}.c5,.c6{ float:left; width:99px; height:99px;}.c5{ border-right:1px solid #000;}.d_left,.d_center,.d_right{ float:left; height:100px; border-right:1px solid #000; border-bottom:1px solid #000;}.d1,.d3{ height:49px; border-bottom:1px solid #000;}.d5,.d6{ float:left; width:99px; height:99px;}.d5{ border-right:1px solid #000;}《/style》html代码：《div class="header"》首《/div》《div class="a1"》A1《/div》《div class="b"》《div class="b1"》B1《/div》《div class="b2"》B2《/div》《div class="b3"》B3《/div》《div class="b4"》B4《/div》《/div》《div class="c"》《div class="c1"》《/div》《div class="c_center"》《div class="c2"》C2《/div》《div》C3《/div》《/div》《div class="c_right"》《div class="c4"》C4《/div》《div class="c5"》C5《/div》《div class="c6"》C6《/div》《/div》《/div》《div class="d"》《div class="d_left"》《div class="d1"》D1《/div》《div》D2《/div》《/div》《div class="d_center"》《div class="d3"》D3《/div》《div》D4《/div》《/div》《div class="d_right"》《div class="d5"》D5《/div》《div class="d6"》D6《/div》《/div》《/div》《div class="footer"》尾《/div》

求一段div+css+js网页代码

《html》《head》《script》functiondraw(){myDiv.style.visibility="visible";}varisClose=false;functionbClose(){if(isClose==true){myDiv.style.visibility="hidden";}}functionisCloseCtrl(is){isClose=is;}《/script》《/head》《bodyonmousedown="bClose()"》《ahref="#"onmousedown="draw()"onmouseout="isCloseCtrl(true)"onmouseover="isCloseCtrl(false)"》显示DIV《/a》《divid="myDiv"onmousedown="draw()"onmouseout="isCloseCtrl(true)"onmouseover="isCloseCtrl(false)"style="width:200px;height:110px;background:’#e5e5e5’;padding-top:45px;padding-left:60px;visibility:hidden;"》隐藏的DIV~~~《/div》《/body》《/html》直接粘贴到记事本里改名就能看效果了不过我也是用记事本写的。。。家里没有编译器，所以有点不太工整，如果需要注释，说声我帮你补上