欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

自学web前端练手——CSS定位与布局

程序员文章站 2024-01-26 12:18:10
...

CSS样式采用内嵌样式完成。

浮动定位实现如下内容：

（1）有外层容器盒子，居中，宽度为页面的70%宽。

（2）内层盒子宽度相等，灰色背景。

（3）2个内层盒子分为2列，两个盒子之间有15px空隙。

（4）每列均有h2标题和一个段落构成（内容不限）。

效果如下：
自学web前端练手——CSS定位与布局

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
     *{
     	margin: 0;
     	padding: 0;
     }
     #container{
     	margin: 0 auto;
     	width: 70%;
     }
     .main{
     	width: 300px;
     	background-color: gray;
     	float: left;
     }
     #main1{
     	margin-right: 15px;
     }
     #main2{

     }
	</style>
</head>
<body>
	<div id="container">
		<div id="main1" class="main">
			<h2>吴亦凡</h2>
			<p>吴亦凡（Kris），1990年11月6日出生于广东省广州市，演员，歌手。

2007年，吴亦凡通过S.M. GlobalAudition Canada加入了韩国SM娱乐公司，参加练习生培训。2012年作为EXO组合成员正式出道，并成为EXO-M队长。2014年5月15日，吴亦凡正式向首尔*地方法院请求判决与SM娱乐公司“专属合同”无效。之后，吴亦凡回归中国国内，担任徐静蕾执导的电影《有一个地方只有我们知道》男主角 ，并于7月发行个人单曲《时间煮雨》 ；同年8月，电影《夏有乔木》确定由吴亦凡出演夏木 ；同年11月，发布个人参与创作的电影同名主题曲《有一个地方》 。</p>
		</div>
		<div id="main2" class="main">
			<h2>王一博</h2>
			<p>王一博（YiBo），1997年8月5日出生于中国河南省洛阳市，中国流行乐男歌手、演员、主持人，男子演唱组合UNIQ成员，职业摩托车赛车手。
2014年9月15日，以UNIQ组合成员身份正式出道；12月，组合获得尖叫爱奇艺之夜颁奖礼最具期待组合奖。2015年，主演青春励志电影《梦想合伙人》；同年，随组合获得酷音乐亚洲盛典年度内地最佳新人奖和尖叫爱奇艺之夜颁奖礼年度音乐大奖 。2016年3月，随组合凭借歌曲《EOEO》获得美国International-K Music Awards最佳编舞奖；4月29日，正式成为综艺节目《天天向上》主持团“天天兄弟”成员；12月，领衔主演都市爱情励志喜剧《人间至味是清欢》 。
2017年，主演青春校园仙侠剧《私立蜀山学园》；同年，获得第十七届音乐风云榜年度盛典偶像新*奖、亚洲影响力盛典最佳新人演员奖以及微博电视影响力盛典年度新锐艺人奖 。2018年2月，主持湖南卫视春节联欢晚会；3月，担任竞演类真人秀节目《创造101》舞蹈导师；4月，领衔主演仙侠古装剧《陈情令》 。9月，主演青春电竞电视连续剧《陪你到世界之巅》。
2019年9月，主演古装剧《有翡》。10月，王一博入选2019福布斯中国30位30岁以下精英榜。</p>
		</div>
	</div>
</body>
</html>
相关标签： 自学web前端

上一篇： mysql数据库生产环境性能优化总结，纯干货！！！（二）

下一篇： HTML入门知识（1）

推荐阅读