<head>
<meta charset="utf-8">
<title>图文混排</title>
<style>
/*左右排版*/
.clearfix{clear: both}
.column{width: 30%position: absolutebackground-color:blue}
.tukuang{broder:1px black solid}
.tukuang img{float: leftwidth: calc(100% / 2 - 10px)margin:5pxborder-radius: 10%position: relative}
.img{width: 50%position: relativebackground-color:black}
.text{float: rightwidth: calc(50% - 10px)background-color:redposition: absolutetop:5pxright:5px}
</style>
</head>
<body>
<div class="column">
<div class="img">
<div class="tukuang">
<img src="images/m1.jpg">
</div>
<div class="tukuang">
<img src="images/m2.jpg">
</div>
<div class="tukuang">
<img src="images/m3.jpg">
</div>
<div class="tukuang">
<img src="images/m4.jpg">
</div>
</div>
<div class="text">
文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域
文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域文本内容区域
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
/*好久没写生疏了 */
给你个参考
<html>
<head>
<style>
h1{
font-size:40px
text-align:center
}
#page{
width:300px
height:500px
margin:0 auto
}
#header{
border: 1px red dashed
width:100%
height:80px
background: #FDFDFD
}
#content{
border: 1px red dashed
background: #FFFADD
width:100%
height:300px
margin:0 auto
}
#left{
border: 1px red dashed
width:80px
height:100%
float:left
}
#right{
border: 1px red dashed
height:100%
width:200px
float:right
}
#footer{
border-style:dashed
width:100%
height:80px
background: #FDFDFD
border: 1px red dashed
}
</style>
</head>
<body>
<div id="page">
<div id="header"><h1>header</h1></div>
<div id="content">
<div id="left"><h1>left</h1></div>
<div id="right"><h1>right</h1></div>
</div>
<div id="footer"><h1>footer</h1></div>
</div>
</body>
</html>
效果如下：你参考着慢慢写吧
响应式网页其实并不难，一般ui设计师会交给你两套设计稿，一套是pc端的，一套是移动端的（平板电脑一般也算pc端），那么除了写两套代码之外（一般是两种端的界面差别比较大的才需要写两套）就是写自适应了，首先布局就是使用百分百，根据屏幕来适应大小。然后排行布局使用栅格系统。或者使用媒体查询，当然有时候需要两者一起用。然后单位使用rem,至于rem其实就是根据根元素的大小来设置大小，不受父级大小影响。默认情况1rem = 16px
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）