CSS+DIV练手-博客

最新推荐文章于 2022-07-13 10:27:02 发布
最新推荐文章于 2022-07-13 10:27:02 发布
阅读量3.7k 收藏 5
点赞数 6
分类专栏： Web开发 文章标签： css div class 相册 float 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shan9liang/article/details/7730345
版权


前些天做网站，前台样式手生得很，所以赶紧找几个实例做一做，这是一个博客首页，今天练手用css+div仿的。

截图：

CSS+HTML源代码

<!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>练习CSS</title>

<style type="text/css">

/*总体样式*/
body{
	margin:0px;
	padding:0px;
	font-family:Arial, Helvetica, sans-serif;/*设置页面字体*/
	background-color:black;
	font-size:12px;
	text-align:center;
}
div{
	display:block;
}

#container{
     width:760px;
    
     position:relative;   /*固定宽度页面相对居中*/
     text-align:left;
     margin:1px auto 0px auto;
     border-left:1px dashed #AAA;
     border-right:1px dashed #AAA;
     border-bottom:1px dashed #AAA;
     background-color:#FFFFFF;
   
}

/*顶部Logo样式*/
#banner{
	 width:760px;
	 height:163px;/*比背景图片高一点，下部放导航菜单*/
	 background:#DAEEFF url(banner.jpg) no-repeat top;/*背景色，图片，不重复，图片位于顶部*/
	 margin:0px;
	 padding:0px;
}

/*全局导航菜单样式*/
#banner ul{
	margin:0px;
	padding:0px;
	position:absolute;
	width:417px;
	left:400px;
	top:145px;
	list-style-type:none;/*清楚项目符号*/
}
#banner ul li{
	float:left;
	padding:0px 6px 0px 6px;
	text-align:center;
}

#banner a:link,#banner a:visited{
	color:#004A87;
	text-decoration:none;
}
#banner a:hover{
	color:white;
	text-decoration:underline;
}


/*内容区左侧块样式*/
#leftBlock{
	position:relative;
	float:left;
	width:210px;
	padding:0px;
	margin:0px;
}

#leftBlock div{
    clear:both;
    margin-top:25px;
	position:relative;
}


/*左侧第一块作者区样式*/
#leftBlock #authorBlock{
	background-image:url(mypic_bg.gif);
	background-repeat:no-repeat;
	margin:5px;
	text-align:center;
}

#leftBlock #authorBlock #pic{
	border:none;
	padding:15px 0px 0px 0px;
	margin:0px 0px 8px 0px;
}

#leftBlock #authorBlock #pic img{
	border:1px solid #444;
	padding:2px;
	margin:0px;
}

#leftBlock #authorBlock #author{
	border-top:1px dashed #999;
	border-bottom:1px dashed #999;
	margin:0px 10px 0px 10px;
	padding:3px 0px 3px 0px;
	
}

/*左侧快通用样式*/
#leftBlock div h4{
	background-image:url(leftbg.jpg);
	background-repeat:no-repeat;
	padding:6px 0px 5px 27px;
	margin:0px;
	font-size:12px;
}
#leftBlock ul{
	list-style:none;
	margin:5px 5px 0px 25px;
	padding:0px;

}
#leftBlock ul li a:link,#leftBlock ul li a:visited{
  	color:black;
  	text-decoration:none;
}
#leftBlock ul li a:hover{
  	color:blue;
}


/*左侧第二块样式*/
#leftBlock #linkBlock ul li{
	float:left;		/* 显示为同一行 */
	width:80px;		/* 指定每一项的宽度 */
	background:none;
	padding:0px;
	border:none;
}


/*左侧其余四块样式*/
#leftBlock .left{
    
	position:relative;
	top:10px;
	margin-bottom:35px;
}
#leftBlock .left ul{
    margin:5px 15px 0px 15px;
}
#leftBlock .left ul li{
	background:url(icon1.gif) no-repeat 8px 7px;
	padding:2px 3px 2px 15px;
	border-bottom:1px dashed #999; 
}



/*内容区右侧样式*/
#rightBlock {
	float: left;
	position: relative;
	font-size: 12px;
	margin: 0px 20px 5px 20px;
	width: 510px;
}

#rightBlock div{
    position:relative;
    margin:20px 0px 30px 0px;
}
#rightBlock div h3{
	border-bottom:1px dashed #999;
	padding-bottom:5px;
	margin-bottom:5px;
	font-size:15px;
}

#rightBlock div h3 a:link,#rightBlock div h3 a:visited{
	color: #662900;
	text-decoration: none;
}

#rightBlock div h3 a:hover{
	color:blue;
}
#rightBlock div p.author{
	margin: 0px;
	text-align: right;
	color: #888;
	padding: 0px 5px 2px 0px;
}


/*脚注样式*/
#footer {
	clear: both;
	text-align: center;
	background-color: #DAEEFF;
	margin: 0px;
	padding: 0px;
	color: #004A87;
}
#footer p{
	padding:2px;
	margin:0px;
}
</style>


</head>
    <body>
        <div id="container">
            <div id="banner">
               <ul>
                   <li><a href="#">个人主页</a></li>
                   <li><a href="#">控制面板</a></li>
                   <li><a href="#">我的文章</a></li>
                   <li><a href="#">我的相册</a></li>
                   <li><a href="#">我的圈子</a></li>
                   <li><a href="#">给我留言</a></li>
               </ul>
              
            </div>
           
           
                <div id="leftBlock">
                	<div id="authorBlock">
                         <p id="pic"><img src="mypic.jpg"></p>
                        <p id="author">我的练手CSS的BLOG</p>
                    </div>
                    <div id="linkBlock">
                           <h4><span>活力地带</span></h4>
                            <ul>
                                <li><img src="1.gif"> <a href="#">个人首页</a></li>
                                <li><img src="3.gif"> <a href="#">控制面板</a></li>
                                <li><img src="4.gif"> <a href="#">我的文章</a></li>
                                <li><img src="5.gif"> <a href="#">我的相册</a></li>
                                <li><img src="6.gif"> <a href="#">我的圈子</a></li>
                                <li><img src="2.gif"> <a href="#">给我留言</a></li>
                            </ul>
                                       
                    </div>
                    <div id="friendlinkBlock" class="left">
                    	<h4><span>友情链接</span></h4>
                        <ul>
                            <li><a href=“#”>网易博客</a></li>
                            <li><a href=“#”>csdn博客</a></li>
                            <li><a href=“#”>博客园</a></li>
                            <li><a href=“#”>QQ空间</a></li>
                            <li><a href=“#”>51com</a></li>
                            <li><a href=“#”>Helloword</a></li>
                        </ul>
                    </div>
                    <div id="categoryBlock" class="left">
                     	<h4><span>我的文章分类</span></h4>
                     	<ul>
                            <li><a href=“#”>个人随笔</a></li>
                            <li><a href=“#”>美术设计</a></li>
                            <li><a href=“#”>我的文章</a></li>
                            <li><a href=“#”>我的相册</a></li>
                            <li><a href=“#”>我的圈子</a></li>
                            <li><a href=“#”>给我留言</a></li>
                        </ul>
                    </div>
                    <div id="listBlock" class="left">
                      	<h4><span>文章列表</span></h4>
                      	<ul>
                            <li><a href=“#”>今天很高兴</a></li>
                            <li><a href=“#”>明天很高兴</a></li>
                            <li><a href=“#”>我是最棒的</a></li>
                            <li><a href=“#”>我会幸福的</a></li>
                            <li><a href=“#”>我会快乐的</a></li>
                            <li><a href=“#”>我会哈哈哈</a></li>
                       </ul>
                    </div>
                      <div id="commentBlock" class="left">
                          <h4><span>最新评论</span></h4>
                          <ul>
                            <li><a href=“#”>小王：《23232》真好</a></li>
                            <li><a href=“#”>小王：《23232》真好</a></li>
                            <li><a href=“#”>小王：《23232》真好</a></li>
                            <li><a href=“#”>小王：《23232》真好</a></li>
                            <li><a href=“#”>小王：《23232》真好</a></li>
                            <li><a href=“#”>小王：《23232》真好</a></li>
                          </ul>
                    </div>
                    
                </div>
                <div id="rightBlock">
                   <div class="article">
			<h3><a href="#">学生节(6)_释放天性</a></h3>
			<p class="author">isaac @ : 2012-07-09 16:17:07</p>
			<p class="content">
释放天性是一件很有意思的事情，也是电子系节目本身能够nb的很重要原因。主持人、各个节目都要求演员释放天性，下面是一些筹备组常用的手段 :)<br>
<br>
1. 一个人在阳台对着外面大声喊“爸爸妈妈我爱你们”等等，演员一般到最后就会喊一些自己的东西了 :)<br>
2. 男女主角相隔50米，在人多的地方大声呼喊“你能听见吗”“听见了吗？”“我爱你”<br>
3. 还是露天，男女主角站在一个小圈子里面，对视3分钟。然后互相说50遍“我爱你”<br>
4. 男1号跟男2号拥抱在一起说台词，直到想吐都吐不出（《包青天》里面ws和wc据说就在小树林抱了好几个晚上...上台的表演彻底放开了）<br>
5. 每天晚上11点后露天排练，放开声音<br>
……<br>
<br>
每次学生节，导演组的导演们都要求入选的各个剧组进行这方面的强化训练，为的就是在台上能更好的表现自己，入戏。这些训练事后的影响自然也是多方面的 :)<br>
<br>
1. 很多演员学生节以后性格更开朗了，参加各种面试更加放得开了<br>
2. 男生越来越ws了..... 胆子越来越大<br>
3. 女生嘛，更加活泼了，朋友圈子扩大了<br>
4. 很多男女主角真的成了一对，娃哈哈~~~<br>
……<br>
<br>
释放天性，魅力无穷!!
			</p>
			<p class="show">浏览[1051] | 评论[5]</p>
		</div>
        <div class="article">
			<h3><a href="#">学生节(6)_释放天性</a></h3>
			<p class="author">isaac @ : 2012-07-09 16:17:07</p>
			<p class="content">
释放天性是一件很有意思的事情，也是电子系节目本身能够nb的很重要原因。主持人、各个节目都要求演员释放天性，下面是一些筹备组常用的手段 :)<br>
<br>
1. 一个人在阳台对着外面大声喊“爸爸妈妈我爱你们”等等，演员一般到最后就会喊一些自己的东西了 :)<br>
2. 男女主角相隔50米，在人多的地方大声呼喊“你能听见吗”“听见了吗？”“我爱你”<br>
3. 还是露天，男女主角站在一个小圈子里面，对视3分钟。然后互相说50遍“我爱你”<br>
4. 男1号跟男2号拥抱在一起说台词，直到想吐都吐不出（《包青天》里面ws和wc据说就在小树林抱了好几个晚上...上台的表演彻底放开了）<br>
5. 每天晚上11点后露天排练，放开声音<br>
……<br>
<br>
每次学生节，导演组的导演们都要求入选的各个剧组进行这方面的强化训练，为的就是在台上能更好的表现自己，入戏。这些训练事后的影响自然也是多方面的 :)<br>
<br>
1. 很多演员学生节以后性格更开朗了，参加各种面试更加放得开了<br>
2. 男生越来越ws了..... 胆子越来越大<br>
3. 女生嘛，更加活泼了，朋友圈子扩大了<br>
4. 很多男女主角真的成了一对，娃哈哈~~~<br>
……<br>
<br>
释放天性，魅力无穷!!
			</p>
			<p class="show">浏览[1051] | 评论[5]</p>
		</div>
        <div class="article">
			<h3><a href="#">学生节(6)_释放天性</a></h3>
			<p class="author">isaac @ : 2012-07-09 16:17:07</p>
			<p class="content">
释放天性是一件很有意思的事情，也是电子系节目本身能够nb的很重要原因。主持人、各个节目都要求演员释放天性，下面是一些筹备组常用的手段 :)<br>
<br>
1. 一个人在阳台对着外面大声喊“爸爸妈妈我爱你们”等等，演员一般到最后就会喊一些自己的东西了 :)<br>
2. 男女主角相隔50米，在人多的地方大声呼喊“你能听见吗”“听见了吗？”“我爱你”<br>
3. 还是露天，男女主角站在一个小圈子里面，对视3分钟。然后互相说50遍“我爱你”<br>
4. 男1号跟男2号拥抱在一起说台词，直到想吐都吐不出（《包青天》里面ws和wc据说就在小树林抱了好几个晚上...上台的表演彻底放开了）<br>
5. 每天晚上11点后露天排练，放开声音<br>
……<br>
<br>
每次学生节，导演组的导演们都要求入选的各个剧组进行这方面的强化训练，为的就是在台上能更好的表现自己，入戏。这些训练事后的影响自然也是多方面的 :)<br>
<br>
1. 很多演员学生节以后性格更开朗了，参加各种面试更加放得开了<br>
2. 男生越来越ws了..... 胆子越来越大<br>
3. 女生嘛，更加活泼了，朋友圈子扩大了<br>
4. 很多男女主角真的成了一对，娃哈哈~~~<br>
……<br>
<br>
释放天性，魅力无穷!!
			</p>
			<p class="show">浏览[1051] | 评论[5]</p>
		</div>
     
       
                    
                  </div>
    
            <div id="footer">
            <p>更新时间: 2012-07-09 16:17:07 ©All Rights Reserved </p>
            </div>
        </div>
    </body>
</html>

做一遍，感觉舒服多了。



shan9liang
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 16
    评论
专栏目录
HTML＋CSS＋DIV网页设计与布局.pdf
05-07
以html语言为基础，围绕最新的css技术精髓展开深入讲解，包括认识网站开发、网页文字和图片、超链接、表格、多媒体、滚动字幕、列表、表单、框架、设置文本样式、设置网页背景样式、设置边框边距、元素布局、网页...
5个前端练手项目(html css js canvas)
热门推荐
m0_51311990的博客
06-04 2万+
目录🥩.跑马灯1.1效果图：1.2思路解析1.3源码🍧.彩虹爱心2.1效果图2.2思路解析2.3源码🌮.闹钟3.1效果图3.2思路解析3.3源码🍲.自制笔记本4.1效果展示4.2思路解析4.3源码🍣.自定义写字台（也可自定义字的样式）5.1效果展示 5.2思路解析5.3源码 2.彩虹爱心 2.1效果图 3.闹钟 3.1效果图 html： css: js: 4.自制笔记本 4.1效果展示 html： css： js： 5.自定义写字台（也.....
40个适合前端初学者练手的基础案例（HTML&CSS）
m0_67846661的博客
05-26 4047
英文 | https://niemvuilaptrinh.medium.com/40-html-css-projects-for-beginner-2021-5bd01ff62361 翻译| 杨小爱 使用多个库进行网页设计会在一定程度上增加页面加载时间，并且难以应用于许多不同的项目。 所以，今天我将向您介绍使用纯 HTML 和 CSS 构建的组件效果。它将帮助您用于许多不同类型的 Web 项目，并进一步提高您在 HTML 和 CSS 方面的技能。 现在让我们一起去看看吧。 01、CSS 单选按钮.
CSS练手小项目
weixin_44048140的博客
06-23 895
刚学了一些CSS和HTML视频的百度搜索哔哩哔哩然后搜索尚硅谷CSS李立超，这个视频里面有HTML和CSS视频，老师讲的我认为是非常好，反正我听得懂，然后写出了这个项目，把小米首页几乎所有的模块都实现了一下，没有学JavaScript所以有的功能就没有实现，有些布局也很勉强，通过这次写项目，让我可以自主的去解决很多问题。如果我以下的源码有问题，或者编码的格式有不好的地方希望大佬们能提出来 对比效果 首先原网站图与自定义实现对比 首先是原图 自定实现的效果 通过如上的图可以看出并不是完全一样.
html+css练手项目3
呼啦啦啦啦啦的博客
07-13 1668
简单的综合考察的html+css的练手项目
HTML、css项目上手练习
雨云21的博客
05-04 7857
根据下边的效果图完成一个完整网页的制作 1、头部的制作： （1）制作#tou外盒子效果； （2）制作#tou1内盒子1效果：包括导航与logo； （3）制作#tou2内盒子效果：包括标题与段落文字； ...
《网页设计与制作项目教程(HTML+CSS+JavaScript)》-配套源码.zip
05-25
html+css+javascript网页设计教程,详细案例配套源码，案例都是单独的方便查看理解，html+css+javascript网页设计教程,详细案例配套源码，案例都是单独的方便查看理解。
韩顺平html+css+javascript-----div+css笔记
12-07
韩顺平 2011 轻松搞定网页设计 div+css笔记
CSS+DIV模版--好的
12-22
好的CSS+DIV！我看了很喜欢呵呵！送给大家！
CSS+DIV布局赏析案例.zip_CSS+DIV布局赏析案例
09-22
CSS+DIV布局赏析案例文字和图片的混排相对较 少，文字内容的描述和图片展示也都比较紧凑集中，使浏览者可以明确精准的找到自 己想要搜索和寻找的信息
2017新人练手专用高仿知乎博客带css,images，js,html源码
02-23
这个是入门练手的入门级项目，知乎博客，有前端的页面和js处理的，新人能把这个独立完成出去找份工作是没问题的，难度也不大当然自己也要努力研究下，祝新人快速成长
html+css+js新手练习项目
10-08
html+css+js新手练习项目，里面包含例子源码，还有单独文件夹分类。适合新手练习用
一个简单易懂的div+CSS写的博客首页
08-15
一个很好懂得CSS+DIV例子，适合新手看，页面也好看的例子
CSS+DIV练习题
05-07
这是我自己整理出来的CSS+DIV练习题，非常全面，里面有单选、多选、判断、填空、问答、编程题。
html+css练手（1）——打造网页版大白
Zzh1110的博客
03-09 327
1.先看实现效果： 2.源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
html+css+js之20个练手小项目-relax app
qq_40312477的博客
05-10 4091
Relax app的功能在于帮助你用于调整呼吸，放松身心。吸气~ 保持~ 呼气。 **需要实现：** - CSS-页面布局，包括圆环与移动的小球 - JS-随着呼吸，圆圈的缩放以及文本的改变
html+css+js之20个练手小项目（一）
qq_40312477的博客
11-07 1万+
html+css+js之20个练手小项目（一）——Hangman前言一、HTML二、CSS三、JS 前言 前端新手练习，记录不迷失。 主要练习html和CSS布局以及JS。 来源github，参考链接：使用html+css和纯js实现小项目 Hangman是一个单词拼写的小游戏，主要功能包括： （1）利用svg画小人图 （2）生成随机单词并展示 （3）单词正确与错误提醒 一、HTML HTML结构比较简单，主要使用了SVG构造小人。学习一下标签svg中的line,circle。 <!DOCTY
div+css 页面布局--左中右版式
最新发布
09-01
Div CSS 页面布局——左中右版式是一种常见的网页布局方式。在这种布局中，页面被分为左侧、中间和右侧三个区域，每个区域可以分别放置内容。 在HTML中，我们可以使用div元素来创建这样的布局。首先，我们需要设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值