• Div+CSS总结


        之前最早接触是在牛腩新闻发布系统中,当时看到这些自己是一头雾水,不过好在我们已经形成了这样的学习习惯,先实践在接触理论,这样再学习理论的时候就会想到当初我是怎样的迷茫,这样自己印象更深刻。

        DIV+CSS,用来进行网页设计和布局的,我们看到百度界面如此简洁,看到很漂亮的空间,这些不得不说是我们CSS的功劳。

           1)Div的功能:对整个网页进行模块划分。

           2)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=gb2312" />
    <title>个人简历</title>
    <link  type = "text/css" rel ="stylesheet"  href="style.css"/>
    </head>
    
    <body>
    	<div id ="profile">
    		<h4>个人简历</h4>
    		<div class ="part">
    			<HR width="100%" color=#987cb9 SIZE=1 />
    			
    			<div id ="photo">
    				<imag src="#">
    			</div>			
    			<div class = "title">基本信息</div>
    			<div class ="content">
    			  <table width="249" border="0">
                    <tr>
                      <td width="50">姓名:</td>
                      <td width="65">张思思</td>
                      <td width="62">性别:</td>
                      <td width="54">女</td>
                    </tr>
                    <tr>
                      <td>年龄:</td>
                      <td>20</td>
                      <td>民族:</td>
                      <td>汉</td>
                    </tr>
                    <tr>
                      <td>籍贯:</td>
                      <td>河北廊坊</td>
                      <td>学历:</td>
                      <td>本科</td>
                    </tr>
                    <tr>
                      <td>地址:</td>
                      <td colspan="3">河北廊坊安次区100号</td>
                    </tr>
                    <tr>
                      <td>E-Mail:</td>
                      <td colspan="3">142255@163.cjom</td>
                    </tr>
                    <tr>
                      <td>邮编:</td>
                      <td>065000</td>
                      <td>联系电话:</td>
                      <td>21233021</td>
                    </tr>
                  </table>
    			</div>
    		</div>
    		<HR width="100%" color=#987cb9 SIZE=1 />
    		<div class ="part">
    			<div class ="title">教育经验</div>
    			<div class ="content">2012.9-2016.6  廊坊师范学院 本科 生物技术专业				
    			</div>
    		</div>
    		<HR width="100%" color=#987cb9 SIZE=1 />
    		<div class ="part">
    			<div class ="title">基本技能</div>
    			<div class ="content">
    				<p>熟悉C/C++语言,Delphi
    				熟悉HTML,CSS ,JavaScript				</p>
    				<p>了解java,php </p>
    			</div>			
    		</div>
    		<HR width="100%" color=#987cb9 SIZE=1 />
    	</div>
    </body>
    </html>
    

            CSS样式

    /* CSS Document */
    #profile{
    	400px;
    }
    #profile h4{
    	text-align:center;
    	font-size:18px;
    }
    #profile .part{
    	border-top:dobule #cccccc;
    	padding-top:5px;
    	margin:0px 5px;
    }
    #profile .part .title{
    	font-size:95%;
    	font-weight:bold;
    	background: #FFB6C1;
    	8em;
    }
    #profile .part .content{
    	padding:15px;	
    	font-size:80%;
    	
    }
    #profile .part #photo{
    	float:right;
    	border:#555555 solid 1px;
    	100px;
    	height:110px;
    }
    
    
    


              经过一番努力之后终于弄成了自己想要的效果,虽然还不太完美但能够自己设计自己的简历感觉非常棒,最重要是这个 feel 倍爽!

                                   

          总结:

          短暂几天的学习自己做了一个小例子,这个功能不大,但能够锻炼自己对与web前段界面设计的能力,同时也给自己增添了信心,没有不可能的,只有自己想不想不做。当你下定决心去做时候,不用去管是否成功,你只要去做就好,那么结果可想而知,一定会成功!

     

        


  • 相关阅读:
    【9901】数塔问题
    【9704】&&【9109】麦森数
    Javascript继承机制的设计思想
    Javascript继承机制的设计思想
    儿子和女儿——解释器和编译器的区别与联系
    Firebug控制台详解
    Firebug控制台详解
    linux 下 自己写的 html文件产生中文乱码问题 解决办法
    linux 下 自己写的 html文件产生中文乱码问题 解决办法
    (译)Objective-C的动态特性
  • 原文地址:https://www.cnblogs.com/zsswpb/p/5771626.html
Copyright © 2020-2023  润新知