HTML基础网页页面

最新推荐文章于 2023-10-30 14:57:33 发布

奇奇XL

最新推荐文章于 2023-10-30 14:57:33 发布

阅读量336

点赞数 2

文章标签： 1024程序员节 html 前端

本文链接：https://blog.csdn.net/qq_55299191/article/details/120931883

版权

效果如下;

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>重庆泷邦盛汇科技有限公司</title>
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/style.css"/>
	</head>
	<body>
		<div class="pageMain">
			<!-- 标题 -->
			<div class="title">
				<img src="img/title.jpg" alt="公司简介">
			<!-- 标题 end -->
			<!-- 左边文字 -->
			<div class="left">
				<div class="title2">
					重庆泷邦盛汇科技有限公司
				</div>
				<p>
				重庆泷邦盛汇科技有限公司成立于2014年，以移动互联网产品研发与市场推广，及新型
				企业投资为主的企业。旗下拥有华夏消费商平台，以微信摇周边等平台。
				</p>
				<p>
				信息时代的经济竞争是以消费者为核心，作为一个有眼光和能力的消费者就有必要把自己
				身边的消费者组织起来，带领大家一起与生产商共享财富分配。助人达成目标，创业成就梦想。
				泷邦盛汇做资源整合者，找到更多的优惠的消费渠道，帮助更多的消费者成为消费商，并且
				成就他们的创业梦想。
				</p>
				<div >
					<a href="#" target="_blank"><span>查看详情</span></a>
				</div>

			</div>
			<!-- 左边文字 end -->
			<!-- 右边图片部分 -->
			<div class="right">
				<img src="img/company.jpg" alt="公司">
			</div>
			<!-- 右边图片部分 end -->
		</div>
	</body>
</html>

css

.pageMain{
	width: 100%;
	height: 100%;
	padding-left: 50px;
}
.left{
	float: left;
	width: 50%;
	height: 50%;
}
.right{
	float: right;
	width: 50%;
	height: 50%;
}
img{
	display:block;
	position:relative;
	margin:auto;
	padding-bottom: 30px;
}
.title2{
	font-weight: bold;
}
p{
	text-indent: 2em;
	font-size: 17px;
	line-height: 200%;
}
a{
	margin-top: 30px;
	background-color: #ff5500;
	color: #fff;
	width:125px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 17px;
}

公文样式

*{
	margin: 0;
	padding: 0;
}
.clear{
	clear: both;
	height: 0;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}
a{
	text-decoration: none;
	display: block;
}

奇奇XL

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML基础网页页面

效果如下;html代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>重庆泷邦盛汇科技有限公司</title> <link rel="stylesheet" href="css/public.css"> <link rel="stylesheet" href="css/style.css"/> </he
复制链接

扫一扫