1列固定不动宽度合理布局和情况照片肯定精准定

日期:2020-09-29 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

1列固定不动宽度网页页面用于我的学习培训笔记,很非常好吧。这张网页页面,我只是尝试了1下情况照片的肯定精准定位设定。
1.HTML一部分只需在<body ></body >之间撰写1个DIV标识,给DIV标识应用layout做为ID名字便可:<div id="layout">这里写入文章内容內容</div>;
2.接下来先为body撰写CSS编码:(方式還是和“我的第1张css+div合理布局网页页面”1样,用电脑鼠标编编码,呵呵!)
body {
margin: 0px;
padding: 0px;
background-attachment: fixed;
background-image: url(images/tupian/a017.JPG);
background-repeat: no-repeat;
background-position: left bottom;
}
再为layout撰写CSS编码,明确宽高宽比外,我开展了肯定精准定位,设置了左右上下边框间距,为变小右上角的情况照片,开展了负数设定。
#layout {
height: 480px;
width: 720px;
margin-top: 20px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 150px;
padding: 40px;
background-image: url(images/tupian/a017⑵.jpg);
background-position: right ⑴00px;
background-repeat: no-repeat;
border: thick double #F79A94;
font-family: "宋体";
font-size: 9pt;
color: #993300;
line-height: 150%;
}
假如必须1列固定不动宽度垂直居中设定,只需把上面4个margin值改成:"margin: 0px auto;"便可。