基于html/css的界面设计

前言

实验准备

• 熟悉并掌握html语法；
• 熟悉层叠样式表css语法；
• 登录w3school，进行示例练习；
  http://www.w3school.com.cn/css/index.asp

实验内容

• 设计一个个人主页，有个人介绍、照片展示等；
  掌握Html语言，利用Html语言进行界面设计。要求有布局、色彩、字体等因素的考虑；
  掌握CSS语法，利用css进行样式的重新设计和代码重构。
  要求把css单独放到一个文件，并进行引用对网页进行渲染。

实验环境

• JetBrains WebStorm 2018.3.5 x64

WebStrom界面讲解

WebStorm界面

WebStorm界面.png

Webstorm基本操作

新建project.png

准备操作.png

制作网页的基本操作

注意：
在html文件中注释标准格式为“< !-- -- >”
为了简洁明了，注释以 // 显示

设置背景、文字（以封面的例）

封面.png

我们首先做一个这样的封面
这个封面的内容呢，就是文字+图片。
现在.html文件进行如下操作：

     //class=“leader”连接了css样式
  

     
        
Hello, world ! 
     //输入文字
      
  

     
    
All that exits is what‘s ahead.
  //输入文字
     
 

• 在网页中显示就是如下图：

  
  
  

  网页显示1.png
  
  

  接下来我么就可以用.css进行样式渲染了

• 添加背景图片，设置大小合适的背景图片

.header{
  background-image:url("images/header1.jpg");  //插入背景图片
  background-repeat: no-repeat;    //背景图片不重复
  width: 100%;           //设置背景宽度
  height: 400px;         //设置背景高度
}
- 设置文字大小、颜色
.helloworld{
  text-align:center         //文字居中
}
.helloworld span h1{
 padding-top: 200px; //距离页面顶部200px;这个需要自己调整一下距离
 color: white;    //设置文字颜色
}
.worldbelow{
 font-size:12px;   //设置文字大小
 text-align:center
}
.worldbelow span h1{
  color: white;
}

• 如此便可做成封面效果

添加线条，制作链接（以导航栏为例）

导航栏.png

• 编写文字，添加链接

  
   首页
   个人介绍  //href添加链接，链接到id="introduce" 的文档
   相册
   动态
  

• 添加样式

.nav{
   margin-top: 7px;   //距离上一个div 7px；
   text-align:center      //文字居中
}
a{
    text-decoration: none;  //祛除连接下划线
    margin: 0px;
    padding: 5px;
    font-size:25px;  //设置字体大小
    color: #66CDAA;
}
a:hover{
    color: #66CDBB;  //鼠标置于链接上时 字体颜色为#66CDBB
}
a:active{
    color: greenyellow; //鼠标按住链接且不放开时 字体颜色为浅绿色
}

• 添加线条

制作边框，添加图片（以动态栏为例）

动态栏.png

• 用.html添加文字、图片、线条

 

  

   

    
   
   
I like my life.
    
    //添加线条
   
   

    
//空行
    
2019-3-17
   

   

   
All that exists is what's ahead.
   //添加图片
   
值得期待的只有前方。
   //添加文字  
     //添加图片
  
 
 

• .css设置样式

.life{   //设置外边框
    width: 1200px; 
    margin: 0 auto;
    border: lightblue 2px solid;
}
.something{  //设置内边框
   border: skyblue 1px solid;
   margin-top: 50px;
   margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 100px;
}
.life_head{
    width: 100%;
    height: auto;
}
>.life_head_picture{  //设置图片
    width: 100px;
    height: 100px;
    border-radius:100px;//让头像圆角
}
.life_head_left{
   margin: 50px;
   float: left;
}
.life_head_left_right{
    text-align: left;
    padding-top: 100px;
    font-family:"blackadder itc";
    font-size:30px;
    color:cadetblue;
}

• 利用上面的基本操作就可以简单的制作一个网页出来了，
  想要网页好看，需要自己添加一些设计元素和理念哦~
  还有就是多加练习！！！
  还有很多有用的操作可以看w3school，这是一个很好的网站哦~