最近学了一点前端的东西，准备实践一下，设计了一个博客的风格，先从圆角边框开始做吧！
下面是做的小例子，不知道这样的解决方案是不是合适：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>æ— æ ‡é¢˜æ–‡æ¡£</title>
<style>
*{
margin:0;
padding:0;
}
body{
margin:8px;
}
#outer {
width:1200px;//content和menu两个div是用“float：left”放置于一行的，
//如果不在最外层规定宽度的话，当将页面放大到一定程度时，menu就会被挤到下一行。
}
#content,#menu {
float:left;
}
#content{
width:700px;
}
.contentD1,.contentD2,.contentD3,.contentD4,.contentD5,.contentD6,.contentD7,.contentD8,.contentD9,.contentD10 {
background:rgb(215,137,65);
overflow:hidden;
font-size:0px;//用IE Tester测试了一下，发现如果不写这句用IE5.5打开的效果一塌糊涂
}
.contentD1,.contentD2,.contentD3,.contentD4,.contentD5,.contentD7 {
height:1px;
}
.contentD6,.contentD8{
height:2px;
}
.contentD9{
height:3px;
}
.contentD1{
margin:0 13px;
}
.contentD2{
margin:0 10px;
}
.contentD3{
margin:0 8px;
}
.contentD4{
margin:0 7px;
}
.contentD5{
margin:0 5px;
}
.contentD6{
margin:0 4px;
}
.contentD7{
margin:0 3px;
}
.contentD8{
margin:0 2px;
}
.contentD9{
margin:0 1px;
}
#c2{
background:rgb(215,137,65);
}
.menuD1,.menuD2,.menuD3,.menuD4,.menuD5,.menuD6,.menuD7 {
overflow:hidden;
height:1px;
font-size:0px;
}
.menuD1,.menuD2,.menuD3 {
background-color:rgb(200,169,123);
}
.menuD1{
margin:0 6px;
}
.menuD2{
margin:0 4px;
}
.menuD3{
margin:0 3px;
}
.menuD4,.menuD5,.menuD6,.menuD7 {
border-left:rgb(200,169,123) 0px solid;
border-right:rgb(200,169,123) 0px solid;
background-color:rgb(78,79,39);
}
.menuD5,.menuD7 {
border-width:4px;
}
.menuD4{
margin:0 2px;
border-width:5px;
}
.menuD5,.menuD6{
margin:0 1px;
}
.menuD6{
border-width:3px;
}
#c3 {
border-left:rgb(200,169,123) 3px solid;
border-right:rgb(200,169,123) 3px solid;
background-color:rgb(78,79,39);
height:300px;
}
#menu{
width:400px;
margin:50px 0 50px -40px;
}
#menu .leftBlock{
position:absolute;
margin-top:-4px;
margin-left:3px;
width:37px;
}
.leftBlockD1,.leftBlockD2,.leftBlockD3 {
background-color:rgb(128,128,66);
overflow:hidden;
font-size:0px;
}
.leftBlockD1 {
margin-left:4px;
height:1px;
}
.leftBlockD2 {
margin-left:2px;
height:1px;
}
.leftBlockD3 {
margin-left:1px;
height:2px;
}
#cc {
background-color:rgb(128,128,66);
width:100%;
height:300px;
}
</style>
</head>
<body>
<div id="outer">
<div id="content">
<div class="contentD1"></div><div class="contentD2"></div><div class="contentD3"></div><div class="contentD4"></div><div class="contentD5"></div>
<div class="contentD6"></div><div class="contentD7"></div><div class="contentD8"></div><div class="contentD9"></div>
<div id="c2">
<h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2>
<h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2>
<h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2>
<h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2><h2>Title</h2>
</div>
<div class="contentD9"></div><div class="contentD8"></div><div class="contentD7"></div><div class="contentD6"></div>
<div class="contentD5"></div><div class="contentD4"></div><div class="contentD3"></div><div class="contentD2"></div><div class="contentD1"></div>
</div>
<div id="menu">
<div class="menuD1"></div><div class="menuD2"></div><div class="menuD3"></div><div class="menuD4"></div>
<div class="menuD5"></div><div class="menuD6"></div><div class="menuD7"></div>
<div class="leftBlock">
<div class="leftBlockD1"></div><div class="leftBlockD2"></div><div class="leftBlockD3"></div>
<div id="cc"></div>
<div class="leftBlockD3"></div><div class="leftBlockD2"></div><div class="leftBlockD1"></div>
</div>
<div id="c3">
<h2>Title</h2><h2>Title</h2><h2>Title</h2>
</div>
<div class="menuD7"></div><div class="menuD6"></div><div class="menuD5"></div>
<div class="menuD4"></div><div class="menuD3"></div><div class="menuD2"></div><div class="menuD1"></div>
</div>
</div>
</body>
</html>
最后衷心希望IE7以前的版本早日淘汰掉吧！
分享到：
相关推荐
标题中的“圆角边框”指的是在网页设计或者图形用户界面设计中，为元素添加具有圆形或半圆形边缘的边框效果。这种效果通常通过CSS（Cascading Style Sheets）来实现，使得用户界面看起来更加现代化和友好。在前端...
1. **博客模板**：博客模板是预先设计好的页面布局和样式，用户可以直接应用到自己的博客上，以快速定制博客的外观和感觉。它通常包含头部、主体、侧边栏、页脚等部分，并预设了颜色、字体、图片等视觉元素。 2. **...
6. **圆角设计**: 圆角边框在现代网页设计中很常见，它能提供柔和的视觉效果，减轻页面的锐利感。这个模板可能采用了圆角设计，让整体风格更加友好和现代。 7. **整站模板**: 整站模板是指包含所有页面（如首页、...
3. **圆角元素**：圆角边框设计使页面看起来更加柔和，减少了尖锐边缘带来的视觉压力，提升了用户体验。在UI设计中，圆角常被视为友好和易用的象征。 4. **质感设计**：质感设计赋予了模板独特的触感，通过模拟真实...
2. **圆角设计**：在网页设计中，圆角边框相比直角显得更加柔和，有助于提升用户的舒适感和现代感。这种设计趋势也与许多现代网页和应用程序的设计风格相吻合。 3. **企业博客**：企业博客是公司在线展示其专业知识...
该资源是一个名为“大红色背景圆角企业博客模板_红色企业公司圆角博客整站”的HTML网站模板，压缩包中包含了一系列用于构建博客页面的文件。这个模板特别适合那些希望以鲜明、引人注目的红色调展示其企业形象的公司...
3. **圆角导航**：CSS3引入了圆角边框属性，如`border-radius`，使得无需图片即可创建圆角效果。在这个模板中，导航栏可能利用了这个属性，使得整体设计更加现代化和精致。 4. **渐变效果**：CSS3也支持背景渐变，...
该资源是一个用于创建个人博客的模板，以蓝色和花纹为主题，设计上采用了圆角布局和两栏结构，整体风格偏重黑色调，给人一种专业而优雅的感觉。博客模板的设计旨在提供一个用户友好的界面，使访客能够轻松浏览和互动...
CSS可以用来美化列表项，如添加圆角、边框，以及设置完成任务后的交叉线效果。还可以通过JavaScript添加交互性，使得用户可以添加、删除任务，以及改变任务状态。 综上所述，HTML和CSS是前端开发的核心工具，它们...
2. **圆角边框**：利用`border-radius`属性可以创建圆角效果，例如`border-radius: 10px;`可以将元素的四角设置为10像素的圆角。 3. **布局**：CSS可以实现各种布局模式，如浮动布局（`float`）、定位布局（`...
3. **圆角边框**：CSS3的边框半径属性（border-radius）使得可以创建圆角效果，这个模板的英文菜单可能就利用了这一特性，为按钮和导航元素添加了圆角。 4. **字体图标**：`YanoneKaffeesatz-Regular.eot`和`...
在设计上，Web2.0风格通常包含光泽效果、渐变色彩、圆角边框、丰富的图标和简洁的布局。这个标签暗示该模板可能包含这些特征，旨在提供一个现代化、用户友好的博客环境。 根据压缩包内的文件名称“readme.md”和...
CSS3提供了许多新的功能，如圆角边框（border-radius），这使得元素可以拥有平滑的圆角，正如模板名称所示。在`style.css`中，我们可以看到对`border-radius`属性的使用，使得诸如按钮、图片边框等元素呈现出柔和的...
1. 圆角边框：CSS3的`border-radius`属性允许我们创建圆形或圆角的元素，使得博客的界面更加柔和，提升了用户体验。在这个模板中，我们可以看到许多元素，如按钮、卡片等，都使用了`border-radius`来实现绿色的圆角...
1. 圆角边框：通过`border-radius`属性实现，让元素的角落呈现出平滑的圆形或椭圆形，为设计增添柔和感。 2. 渐变效果：使用`linear-gradient`和`radial-gradient`函数创建线性或径向渐变背景，增加视觉吸引力。 3...
该资源是一个名为"黑色城市个人博客模板下载_黑色 博客 整站 幻灯 圆角.rar"的压缩包，主要用于创建一个全黑色调、带有整站设计、幻灯展示以及圆角元素的个人博客网站。这个模板设计独特，采用深色背景，能为用户...
标题中的“圆角表格”指的是在网页或应用中使用CSS样式来实现表格边框具有圆润效果的技术。这种设计可以使用户界面看起来更加现代、友好，减少尖锐边缘带来的视觉冲击，提升整体美感。在Web开发中，实现圆角表格通常...
"蓝色布局博客网站CSS3模板"是一个专为博客设计的网页模板，其特色在于采用了蓝色调的视觉风格，同时充分利用了CSS3技术进行页面布局和设计。这款模板旨在提供一种简洁、清晰的用户体验，使博客内容能够以优雅的方式...
3. **边框和背景**：圆角边框border-radius、渐变background gradients、阴影box-shadow等，提供了丰富的美化手段。 4. **过渡transition**：平滑地改变一个或多个CSS属性，模拟简单的动画效果。 5. **动画animation...
在这个模板中，"web20"可能体现在光滑的按钮、渐变色、圆角边框等设计特征上，这些都是Web 2.0时代的典型视觉风格。 5. **透明效果**: 透明效果是通过CSS中的opacity属性或rgba()函数实现的，它可以赋予元素不同...