实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.div-box{
background-color:#ddd;
width:960px;
margin:15px auto;
}
.div-header{
border:1px solid red;
width:100%;
text-align:center;
padding:50px 0;
background-color:#daa1a1;
}
.div-nav{
border:1px solid blue;
background-color:black;
width:100%;
}
.div-nav a{
text-decoration:none;
color:white;
display:inline-block;
padding:10px 8px;
}
.div-nav a:hover{
background-color:#ddd;
color:black;
}
.div-left{
border:1px solid yellow;
padding:10px;
width:70%;
text-align:center;
float:left;
/* background-color:#ddd; */
}
.div-left p{
margin:8px 0;
}
.img-content{
width:100%;
}
.div-right{
border:1px solid black;
width:30%;
float:right;
padding:10px;
background-color:#78e0ef;
}
[class*=right-content]{
border:1px solid #0479a7;
text-align:center;
margin:10px 0;
padding:10px;
}
[class*=left-content]{
border:1px solid #a414d5;
margin:10px 0;
padding:10px;
}
.right-content3 a{
padding:5px;
}
.img-products{
width:100%;
}
.div-footer{
border:1px solid green;
width:100%;
clear:both;
padding:30px 0;
text-align:center;
background-color:#daa1a1;
}
.div-footer a {
color:blue;
padding:20px ;
font-size:16px;
}
.div-ul{
border:1px solid black;
width:32%;
display:inline-block;
}
.div-ul h3{
background-color:#e6ac5c;
padding:5px 0;
}
.div-ul p{
margin:0;
}
.div-ul a{
display:block;
padding:5px 0;
}
.div-ul a:hover{
background-color:#ec5555;
color:yellow;
}
@media screen and (max-width:600px){
.div-left , .div-right{
width:100%;
}
}
</style>
</head>
<body>
<div class="div-box">
<div class="div-header">
<h1>My Website</h1>
<p>Resize the browser window to see the effect.</p>
</div>
<div class="div-nav">
<a href="">Home</a>
<a href="">Download</a>
<a href="">Video</a>
<a href="">About</a>
</div>
<div class="div-left">
<div class="left-content1">
<h2>文章标题1</h2>
<p>发布于：2023年9月18日 作者：hrs</p>
<img class="img-content" src="img/img1.jpg"></img>
<p>一一些文本作用你我来奔右要困境地有轻工业载栽植苛栽塔顶国一些文本作用你我来奔右要困境地有轻工业载栽植苛栽塔顶国一些文本作用你我来奔右要困境地有轻工业载栽植苛栽塔顶国一些文本作用你我来奔右要困境地有轻工业载栽植苛栽塔顶国一些文本作用你我来奔右要困境地有轻工业载栽植苛栽塔顶国一些文本作用你我来奔右要困境地有轻工业载栽植苛栽塔顶国些文本作用你我来奔右要困境地有轻工业载栽植苛栽塔顶国</p>
</div>
<div class="left-content2">
<h2>文章标题2</h2>
<p>发布于：2023年8月15日 作者：hrs</p>
<img class="img-content" src="img/img2.jpg"></img>
<p>一一些文本作用你我来奔右要困境地有轻工业载栽植苛栽塔顶国一些文本作用你我来奔右要困境地有轻工业载栽植苛栽塔顶国一些文本作用你我来奔右要困境地有轻工业载栽植苛栽塔顶国一些文本作用你我来奔右要困境地有轻工业载栽植苛栽塔顶国一些文本作用你我来奔右要困境地有轻工业载栽植苛栽塔顶国一些文本作用你我来奔右要困境地有轻工业载栽植苛栽塔顶国些文本作用你我来奔右要困境地有轻工业载栽植苛栽塔顶国</p>
</div>
<div class="left-content3">
<div class="div-ul">
<h3>热门文章</h3>
<p><a href="#">列表文章标题01</a></p>
<p><a href="#">列表文章标题02</a></p>
<p><a href="#">列表文章标题01</a></p>
<p><a href="#">列表文章标题02</a></p>
<p><a href="#">列表文章标题03</a></p>
<p><a href="#">列表文章标题04</a></p>
<p><a href="#">列表文章标题04</a></p>
</div>
<div class="div-ul">
<h3>最新文章</h3>
<p><a href="#">列表文章标题01</a></p>
<p><a href="#">列表文章标题01</a></p>
<p><a href="#">列表文章标题01</a></p>
<p><a href="#">列表文章标题02</a></p>
<p><a href="#">列表文章标题03</a></p>
<p><a href="#">列表文章标题04</a></p>
<p><a href="#">列表文章标题04</a></p>
</div>
<div class="div-ul">
<h3>热门评论</h3>
<p><a href="#">列表文章标题01</a></p>
<p><a href="#">列表文章标题01</a></p>
<p><a href="#">列表文章标题02</a></p>
<p><a href="#">列表文章标题03</a></p>
<p><a href="#">列表文章标题04</a></p>
<p><a href="#">列表文章标题02</a></p>
<p><a href="#">列表文章标题03</a></p>
</div>
</div>
</div>
<div class="div-right">
<div class="right-content1">
<h2>关于我们</h2>
<img></img>
<p>你行网是一个电脑学习网站你行网是一个专注于 Drupal 学习的网站。它提供了广泛的 Drupal 相关的教程、文档、案例分析、视频课程、社区论坛等资源，旨在帮助 Drupal 初学者和专业人士深入了解 Drupal 平台，学习如何使用 Drupal 构建高质量的网站、应用和数字解决方案。
你行网的内容涵盖了 Drupal 的各个方面，包括 Drupal 核心模块、主题、插件、布局和设计等。其优秀的教育资源和强大的社区支持，使得你行网成为 Drupal 学习者的首选网站之一。
无论您是想学习 Drupal 的基础知识，还是希望深入掌握高级技巧和最佳实践，你行网都能为您提供全面、实用的指导。在你行网，您可以通过自主学习或参加在线课程来获得对 Drupal 平台的深入了解，同时也可以在社区论坛中与其他 Drupal 学习者分享经验、提问问题、解决难题。
如果您正在寻找一家专业的 Drupal 学习网站，那么你行网是您最好的选择之一。</p>
</div>
<div class="right-content2">
<h2>产品列表</h2>
<img class="img-products"src="img/iphone_01.jpeg" ></img>
<img class="img-products"src="img/iphone_02.jpeg" ></img>
<img class="img-products"src="img/iphone_03.jpeg" ></img>
</div>
<div class="right-content3">
<h2>跟我学编程</h2>
<a href="#">HTML教程</a >
<a href="#">CSS教程</a >
<a href="#">JAVASCRIPTSS教程</a >
<a href="#">PHP教程</a >
<a href="#">C语言教程</a >
<a href="#">MYSQL教程</a >
</div>
</div>
<div class="div-footer">
<a href="#">使用条款</a>
<a href="#">隐私条款</a>
<a href="#">技术支持：升辉科技</a>
<a href="#">备案：粤ICP备06645631号</a>
</div>
</div>
</body>
</html>
运行效果：
评论