使用CSS和DIV制作网站是现代前端开发的基础,通过合理的HTML结构设计和CSS样式控制，可以构建出布局灵活、样式美观的网页，以下从基础结构、布局实现、样式设计、响应式适配及优化技巧等方面详细说明操作方法。
需明确HTML中的<div>元素作为块级容器，用于包裹页面内容，而CSS则负责控制这些容器的位置、尺寸、颜色等表现，制作网站时，需遵循“语义化HTML”原则，即使用具有明确含义的标签（如<header>、<nav>、<main>、<section>、<footer>）配合<div>，确保结构清晰，一个简单页面结构可写为：<body><header>头部</header><nav>导航</nav><main><div class="content">主要内容</div><div class="sidebar">侧边栏</div></main><footer>底部</footer></body>。
接下来是布局实现,核心在于CSS的盒模型、浮动（float）和定位（position）属性，传统布局常使用浮动，例如设置.content{float:left;width:70%;}和.sidebar{float:right;width:30%;}，使两者并排显示，但需注意清除浮动（如添加.clearfix::after{content:"";display:block;clear:both;}），避免父元素高度塌陷，现代布局更推荐Flexbox或Grid，Flexbox适合一维布局（如导航栏），通过设置.container{display:flex;justify-content:space-between;}轻松实现元素对齐；Grid适合二维布局（如整体页面），通过.grid-container{display:grid;grid-template-columns:1fr 2fr;grid-template-rows:auto 1fr auto;}快速划分区域。
样式设计需注重美观与用户体验,可通过CSS选择器精准控制元素样式，如类选择器.header{background-color:#333;color:white;padding:20px;}设置头部背景和文字颜色，字体推荐使用font-family:"Arial",sans-serif;，字号通过font-size:16px;设置，行距用line-height:1.5;提升可读性，颜色搭配遵循对比原则，如深色背景配浅色文字，按钮使用background-color:#007bff;并添加悬停效果.btn:hover{background-color:#0056b3;}增强交互感，盒模型中，box-sizing:border-box;可让padding和border包含在width内，避免布局计算错误。
响应式适配是网站必备功能,核心是媒体查询（@media），针对不同屏幕尺寸调整布局，@media(max-width:768px){.content,.sidebar{width:100%;float:none;}}，使移动端单列显示，使用相对单位（如rem、%）代替固定像素（px），html{font-size:16px;}下，1rem=16px，.container{width:90%;max-width:1200px;margin:0 auto;}可保证页面在不同设备下居中且宽度自适应。
优化技巧方面,代码需简洁高效，避免使用!important，优先通过选择器优先级覆盖样式；使用CSS预处理器（如Sass）嵌套规则减少重复代码，例如.nav{ul{list-style:none;li{display:inline-block;margin:0 10px;}}}；利用CSS压缩工具（如CleanCSS）减小文件体积，提升加载速度，图片优化（如使用img{max-width:100%;height:auto;}）和合理使用动画（如transition:all 0.3s ease;}）也能增强用户体验。
测试环节必不可少,通过浏览器开发者工具调试布局和样式，检查不同设备下的显示效果，确保兼容性。
相关问答FAQs：
-
问：为什么我的浮动布局出现了父元素高度塌陷问题？
答：浮动元素脱离文档流，导致父元素无法包含其高度，解决方法是在父元素末尾添加.clearfix类（如.clearfix::after{content:"";display:block;clear:both;}），或在父元素上设置overflow:hidden;触发BFC（块级格式化上下文）。
（图片来源网络，侵删） -
问：如何实现两列布局中侧边栏固定宽度、主内容栏自适应？
答：可使用Flexbox，设置父容器.container{display:flex;}，侧边栏.sidebar{width:200px;flex-shrink:0;}（固定宽度且不压缩），主内容.content{flex:1;}（自动占据剩余空间）；也可使用Grid，如.container{display:grid;grid-template-columns:200px 1fr;}，效果相同且代码更简洁。
