为了账号安全,请及时绑定邮箱和手机立即绑定

布局基础而剧都是打对了撒

标签:
Html/CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
font-family: "Microsoft Yahei"
}

.header{
width: 100%;
height: 50px;
background-color:black;

}
.left_1{
width: 500px;
height: 500px;
background-color: white;
border:1px solid darkgray;
float: left;

}
.right{
width: 250px;
height: 450px;
background-color: white;
border:1px solid darkgray;
float: right;
}
.left_2{width: 500px;
height: 500px;
background-color: white;
border:1px solid darkgray;
}
.left_3{width: 500px;
height: 500px;
background-color: white;
border:1px solid darkgray;
}
.left_4{width: 500px;
height: 500px;
background-color: white;
border:1px solid darkgray;
}

</style>

</head>
<body>
<div class="header">code master 导航链接一导航链接二导航链接三</div>
<div class="left_1">
<h1>文章一级标题</h1>
<h2>文章二级标题</h2>
<span>文章作者</span>
<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,还行了<p>
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="logo.png">
<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,<a>这是一个很长很长的段落</a>,这是一个很长很长的段落,这里有一个链接到http://ife.baidu.com这是一个很长很长的段落,这是一个很长很长的段落,
<strong>这里有个粗体字</strong>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落。</p>

</div>
<div class="right"></div>
<div class="left_2"></div>
<div class="left_3"></div>
<div class="left_4"></div>

</body>
</html>

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消