本文探讨了前端网页布局的重要性和实现方法，包括使用HTML和CSS进行布局设计。通过示例展示了如何创建一个包含主内容区域和侧边栏的结构，并确保其在不同屏幕尺寸下的响应式表现。关键点包括清除浮动、设置最小宽度以防止列过窄，以及使用百分比宽度实现灵活的列布局。同时，文章提到了在小屏幕设备上可能遇到的问题及解决策略。
我觉得你是个新手.你应该努力掌握HTML和CSS. 🙂
但是,这是一个解决方案.请仔细检查.希望你会得到你的答案.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
}
.clearfix:after {
content: "";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.wrapper {
min-width: 1000px;
max-width: 1360px;
margin: 0 auto;
padding: 0 20px;
}
.title_container {
padding-top: 50px 0 30px;
}
.title_container h1 {
line-height: 66px;
}
.small_blocks {
height: 55px;
overflow: hidden;
margin-bottom: 20px;
font-size: 30px;
font-weight: 100;
line-height: 52px;
color: #fff;
}
.small_blocks > div {
height: inherit;
float: left;
padding-left: 20px;
}
.small_blocks .block1 {
background: #390b5d;
width: 66.111111%;
}
.small_blocks .block2 {
width: 33.888889%;
background: #e26c34;
}
.content {
/*height: 377px;*/
overflow: hidden;
margin-bottom: 60px;
}
.content > div img {
width: 100%;
height: auto;
}
.content .image1 {
float: left;
width: 29.777778%;
}
.content .image2 {
float: left;
width: 70.222222%;
padding-left: 10px;
}
.main_container {
width: 68.181818%;
float: left;
}
.main_info {
margin-bottom: 60px;
background: #d7d7d7;
}
.main_info .head {
padding-left: 20px;
background: #000;
color: #fff;
}
.main_info h2 {
height: 34px;
line-height: 34px;
}
.main_info .body {
padding: 20px;
}
.sidebar {
width: 31.818182%;
padding-left: 20px;
float: right;
}
.sidebar_block {
min-height: 150px;
margin-bottom: 20px;
padding: 20px;
background: #000;
color: #fff;
}
Title
Block 1
Block 2
Main Info-1 h2
Main info 1
Main Info-2 h2
Main info 2
Main Info-3 h2
Main info 3
Div 1
Div 2
Div 3
Div 4
关于你评论中的问题：
>实际浮动工作.当您使用固定宽度宽度：420px;时,可能没有足够的空间让第二个ul在单行中容纳它.使用宽度：50％;或以下,看看变化.或者,您可以在更宽的屏幕上查看,例如1360px分辨率.>是的,适用于较小的设备.这是一个基本的例子.我使用百分比值作为列宽.因此,在较小的设备中,列可能会变得非常窄.为了防止这种情况,我使用了min-width：1000px for .wrapper.这样可以防止较窄的列宽,但会在较小的设备中产生水平滚动条.
2045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
