CSS+DIV练手-博客

最新推荐文章于 2024-10-28 16:21:10 发布
最新推荐文章于 2024-10-28 16:21:10 发布
阅读量81 收藏
点赞数
文章标签： xhtml 面试 人工智能
原文链接：http://www.cnblogs.com/javaspring/archive/2012/07/09/2656501.html
版权


前些天做网站，前台样式手生得很，所以赶紧找几个实例做一做，这是一个博客首页，今天练手用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>

做一遍，感觉舒服多了。



转载于:https://www.cnblogs.com/javaspring/archive/2012/07/09/2656501.html

weixin_30418341
关注
Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架！
qq_33546296的博客
06-03 1095
/ 此处的id很重要name: ''}),getters: {},},actions: {},// 登录// 调用接口，做逻辑处理})setup() {// $patch 修改 store 中的数据name: '名称被修改了,nameLength也改变了'})return {userStore,updateName},})
个人博客-简单蓝（DIV+CSS）模板
07-17
HTML模板、DIV+CSS模板、个人博客模板、DIV模板、CSS模板
DIV+CSS例子
G19931112的博客
08-10 214
DIV水平居中+垂直居中#main_zone{ width:1190px; height:570px; background-color:#fff; margin:0 auto; /*左右居中*/ margin-top:-285px;/*垂直居中*/ margin-left:-595px; position:absolute;...
Div+CSS 基础demo
L511157586的博客
06-05 259
今天看到一个Div+CSS 布局的经典教程，奉献给大家，本人一向偏好DIV+CSS，但由于关注seo 和网站运营较多，造成了DIV+CSS 做网页模板的技术生疏，为了培养自己成全才，不得不好好消化一翻，其实很简单滴。这个DIV+CSS 布局教程很不错。教程共分5 节，其实就一点点内容，不过通过学习，一定能让你领会到DIV+CSS的精髓，不要嫌文字多，一个小时一定能让你学完，当然...
一个CSS+DIV的demo
clain599的专栏
09-12 400
 文字来源:http://blog.sina.com.cn/s/blog_4bf522ba01008kpc.html http://blog.sina.com.cn/s/blog_4e362d6d01009e65.html 
今天用 CSS+DIV 为主，仿造了一个 Blog 静态网页，
imwtr 的专栏
07-14 961
调整什么的好伤神啊...            博客
css+div练手-工作室
一名系统架构师的征途
07-09 2401
今天一天调了两个主界面，另一个见《CSS+DIV练手-博客》 ，第一个用了5个小时，第二个仅仅用了1个半小时，看样子熟能生巧啊。      截图： 源代码： CSS练手 body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color: #2A3A00
HTML+CSS+DIV网页设计.zip
08-15
【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发...
初学者练手专用-学生作业-学校实训项目-电商平台页面全套代码html+css+js
07-26
例如，`<div>`标签用于创建区域，`<ul>`和`<li>`用于构建列表，`<form>`用于表单提交（如搜索或下单），`<img>`展示商品图片，`<a>`实现链接跳转等。在本项目中，初学者可以学习如何组织这些元素来构建一个功能完善...
div+css教案.pdf
10-04
《CSS+DIV网页样式与布局从入门到精通》是一门针对初学者的高职高专职业技能课程，旨在教授学生如何利用CSS（层叠样式表）和DIV进行网页设计和布局。课程按照“操作-理论-操作”的原则，通过设计案例帮助学生建立...
基于HTML+CSS+JavaScript制作响应式个人博客模板源码( JavaScript期末大作业 )
HTML网页设计
08-07 1006
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构......
结合HTML5的语义化标签，运用DIV＋CSS网页布局技术设计一个个人博客页面
qq_45864164的博客
11-22 4499
** CSS+DIV页面布局 ** 结合HTML5的语义化标签，运用DIV+CSS网页布局技术设计一个个人博客页面。要求： （1）header标签定义页面头部区；nav标签定义导航区；div标签定义中部的内容区块，其中左边用section标签嵌套两篇article文章区，每篇文章区应含有头部的标题 区、段落内容和页脚；右边用aside设计侧栏；底部用footer标签定义版权信息，如图2.1所示。 （2）编写外部CSS文件，为主文件中用到的各个标签属性进行样式设置，如背景色，字体，字号大小，对齐方式等。 （3
使用DIV+CSS布局设计个人主页 设计个人主页，使用DIV+CSS的方式进行页面布局。
GAVT的博客
09-28 5155
（1）构思个人主页的版面布局； （2）使用DIV+CSS技术设计出构思好的个人主页。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>GAVT</title> <link rel="stylesheet" href="index.css"> </head> <body>
HTML实例网页代码 简单的个人博客网站设计与实现 (div+css)
网页设计与制作
10-09 3705
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
XHTML 简介
wjs2024的博客
10-04 889
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
诺基亚的裁员风暴
最新发布
codenav的博客
10-28 1021
今日面试题：Nacos 中的 Namespace 是什么？
2025前端面试-浏览器的事件循环和浏览器的事件循环的区别是什么---002
chunchun的博客
10-26 574
在执行完同步任务之后 在遇到异步事件如ajax settimaout等之后 会先将这些事件添加到对应的任务执行队列中，之后会触发事件循环机制 会首先对于添加到微任务队列中的部分进行执行，再对于宏任务队列中的函数进行执行。并且会在一定时间中进行询问查看（循环）是否队列中有未完成的任务—因为例如ajax的请求返回之后就会需要一定的执行时间。
面试域——面试系统工程
庄小焱
10-26 523
你知道招聘市场的“551 定律”吗？551 定律：每一层筛选环节都会有百分之十的折损率。一个岗位从接收简历到发下 Offer 至少要筛选 500 份左右的简历、面试 50 人左右、只有 5 人左右通过面试，最终也只有 1 位候选人可以顺利入职。对于企业内的招聘人员平均每天至少在一个岗位上要收到几百份简历，至少要面试十几个候选人，每周至少会发出 4~5 个 Offer；一周内至少同时会招聘 5~7 个不同的岗位。
创新前端点名器：HTML+CSS+JavaScript实战演练
本文档介绍的“JavaScript花式点名”项目，是一个结合HTML、CSS和JavaScript的前端小练手，旨在通过创建一个具有交互性和视觉效果的点名器，帮助学习者加深对前端技术的理解。 ### HTML HTML（HyperText Markup ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值