CSS 布局实现

最新推荐文章于 2021-11-17 21:29:58 发布
最新推荐文章于 2021-11-17 21:29:58 发布
阅读量166 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ios0213/article/details/51546330
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
body{
	background-color:#F0E9D8;
}
#wrap {
	margin: 0px auto;
	width: 80%;
	background-color:#FFF;
}
#left {
	float:left;
	width:20%;
	height:500px;
	border:2px solid #0F0;
	margin-top:10px;
	margin-left:10px;
}
#right{
	float:right;
	width:35%;
	height:600px;
	border:2px solid #00F;
	margin-top:10px;
	margin-right:10px;
}
#center{
	float:left;
	width:40%;
	height:800px;
	margin-top:10px;
	margin-bottom:50px;
	margin-right:5px;
	margin-left:5px;
	border:2px solid #300;
}
#bottom{
	clear:both;
	margin:0px auto;
	width:90%;
	height:30px;
	border:2px solid #099;
}
#ad{
	position:fixed;
	border:#999 solid 2px;
	width:120px;
	height:200px;
	right:0px;
	top:160px;
	background-image:url(200912317295935977803.jpg);
}
</style>
</head>

<body>
<div id="wrap">
  <div id="left"> </div>
  <div id="center"> </div>
  <div id="right"> </div>
  <div id="bottom"> </div>
</div>
<div id="ad"></div>
</body>
</html>

ios0213
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div+css布局实现个人网页设计(HTML期末作业)
专注于dreamweaver网页设计制作
08-06 3432
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大......
CSS 布局
qq_40890601的博客
08-02 101
最近一直在用框架，甚至都快忘记css 怎么使用布局了，赶紧记录一篇比较完整的布局。 基础知识 网页中的三种布局模型 流模型 浮动模型（float） 层模型（相对定位relative，绝对定位absolute，固定定位fixed (z-index属性)） 网页布局的几种方式 一列布局 一列布局相对简单，设置宽高背景，也可以让内容撑开盒子。 两列布局 两列布局用得比较多， 七种实现左侧固定，右侧自适应两栏布局的方法 双inline-block 方案 <div class="wrapper">
CSS实现两列布局
zxl1990_ok的博客
11-17 2295
左列宽固定，右列自适应 效果如下： 利用float + margin <style> .left { background-color: red; width: 200px; height: 500px; float: left; } .right { background-color: green; margin-left: 200px; /* 大于或等于左列宽度 */ height: 500px; } .
css聊天布局,CSS实现聊天布局
weixin_29927289的博客
08-03 1646
 hmy66吃饭了么吗吃饭了吗hmy666 {{item.contentWord}}Sendexport default {name:'chat',data() {return {chatContent: [{fromUser:'me',from_nickname:'小仙女',avatar:'https://gimg2.b...
css实现居中布局
m0_50296879的博客
09-01 112
本文相对来说都是代码，所以大家可以根据不同需求看相关样式实现，博主很懒，写的有点粗糙，勿喷，哈哈哈~~~???? 行内元素 <div class="parent"> <span class="child">counter</span> </div> 水平居中 方法1 text-align .parent { background-color: yellow; text-ali
body css样式中 设置宽度和背景色
热门推荐
ios0213的专栏
06-22 1万+
无标题文档 body{ padding:0; margin:0; margin:0 auto; background-color:#069; width:80%; height:800px; border:1px solid #F00; } div{ height:200px; width:200px; border:1px solid #0F0; } 如上
用 focus 获取焦点并设置样式
ios0213的专栏
05-31 4947
input:focus,textarea:focus{ background-color:#CCC; }
css 链接变颜色 （加边框设置样式）
ios0213的专栏
05-14 2636
无标题文档 .wrap{ width:90%; height:1000px; border:2px solid #CCC; margin:0 auto; } .wrap_01{ height:900px; margin:0px 10px 0px 10px; background-color:#EFEFEF; } .footer{ height:40px; backg
css中 除了使用:hover 还有:after
ios0213的专栏
05-25 1994
:after 定义和用法 :after 选择器在被选元素的内容后面插入内容,也可以在被选择元素后面添加新的样式。 如： this is a test 123 用:after 设置样式，如下: p:after{ content:"-添加的内容"; color:red; fontsize:16px; } 则显示后效果为: 123-添加的内容
CSS中 伪类和伪元素的用法 --实现元素前后添加[]框
ios0213的专栏
06-16 1586
无标题文档 a{ position:relative; display:inline-block; outline:none; text-decoration:none; color:#636; font-size:24px; padding:5px 25px; } a:hover::before,a:hover::after{ position:absolute; /*注意
自己写的仿QQ空间导航栏
ios0213的专栏
05-02 1451
无标题文档 *{ margin:0; padding:0; } .wrap{ width:900px; padding:0; margin:0 auto; border:1px solid #999; margin-top:40px; } .header{ position:fixed; height:40px; width:100%; top:0; back
利用calssName给元素修改样式
ios0213的专栏
06-23 1178
之前是用DOM style 方式给元素设置或者刷新样式，可以利用元素的className属性设置元素的样式。 如： 无标题文档 .demo1{ color:#F00; } .demo2{ background-color:#066; } how are you? var m=document.getElementById("test"); m.className="de
css 图片适应浏览器大小
ios0213的专栏
05-14 800
常规图片一般采用这种方式插入 现在可以用div方式，将图片设置为这个div的背景图片，此时div的宽度要比图片的宽度要宽， 如：
鼠标经过图像变大，IE8以下不兼容
ios0213的专栏
06-23 594
无标题文档 * { padding: 0; margin: 0; } body { background-color: #F2F2F2; } .wrap { width: 55%; margin: 0 auto; padding: 50px; } .header { margin-top: 10px; margin-bottom: 50px; text-align: cente
thead tbody tfoot的用法
ios0213的专栏
05-31 560
thead tbody tfoot  IE浏览器低版本中支持不是很完善，现在HTML5支持教好，可以参考（得意生活网） 源代码，里面有这三个标签的具体使用。
兼容IE,Firefox,CSS3 opacity透明度-FireFox 3.5+不支持-moz-opacity属性
ios0213的专栏
06-20 519
让div 透明，兼容IE FF transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;}  filter:alpha(opacity=50);  -moz-opacity:0.5;  -khtml-opacity: 0.5;  opacity
css样式中关于定位的问题
ios0213的专栏
05-30 502
无标题文档 #demo1{ position:relative; left:300px; top:100px; width:300px; height:200px; background-color:#F00; } #demo2{ position:absolute; width:300px; height:200px; top:100px; left:100px; ba
百度首页 focus() select() line-height
ios0213的专栏
06-18 503
无标题文档 * { padding: 0; margin: 0; } div { margin: 0 auto; margin-top: 100px; text-align: center; } .search { width: 500px; height: 35px; line-height:35px; /*设置行高让光标IE浏览器下在文本框中居中显示*/ border:
CSS 让页面内容居中显示
ios0213的专栏
05-14 468
常见的如： #wrap{ width:80%px; margnin:0 auto; } 但是在这种方法在IE浏览器较低的版本中不支持，可以这样： #wrap{ width:80%px; margnin:0 auto; align:left; } 还可以这样： #wrap{ width:720px; position:relative; left:50%;
（四）DIV+CSS布局 实现如下布局
最新发布
08-30
对于DIV CSS布局，您可以使用以下代码实现您所需的布局： HTML代码： ```html <div class="container"> <div class="left-sidebar">左侧边栏</div> <div class="content">主要内容</div> <div class="right-sidebar">右侧边栏</div> </div> ``` CSS代码： ```css .container { display: flex; } .left-sidebar, .right-sidebar { width: 200px; background-color: #ccc; } .content { flex-grow: 1; background-color: #f2f2f2; } ``` 上述代码中，使用了Flex布局来实现三列布局。`.container` 是包含左侧边栏、主要内容和右侧边栏的容器。`.left-sidebar` 和 `.right-sidebar` 定义了左侧和右侧的边栏，并设置了固定宽度和背景颜色。`.content` 是主要内容区域，使用 `flex-grow: 1` 让其自动填充剩余空间。 您可以根据需要调整容器和各个元素的样式以及宽度。希望能对您有帮助！如有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值