Python实战总结（一）

这是我做的一个Html测试页面：

页面效果如下所示：

Paste_Image.png

html代码如下所示

    
    
    


    

        ![](images/blah.png)
        

            
Home
            
Site
            
Other
        
    
    

        
Article
        

            

                
                
The blah
                
This is a dangerously delicious cake.
            
            

                
                
The blah
                
It's always taco night somewhere!
            
            

                
                
The blah
                
Omelette you in on a little secret 
            
            

                ![](images/0004.jpg)
                
The blah
                
It's a sandwich.  That's all we .
            
        
    
    

        
@copy;   SouthWest University
    

这是另外一个html页面

Paste_Image.png

html代码如下所示

    
    
    


    

        ![](images/blah.png)
        

            
Home
            
Site
            
Other
        
    
    

        
The Beach
        

            ![](images/0001.jpg)
            ![](images/0002.jpg)
            ![](images/0003.jpg)
        
        

            stretching from Solta to Mljet, and this unique cycling trip captures the highlights with an ideal
            balance of activity, culture and relaxation. Experience the beautiful island of Korcula with its picturesque old town,
            the untouched beauty of Vis, and trendy Hvar with its Venetian architecture. In the company of a cycling guide,
            this stimulating journey explores towns and landscapes, many of which are on UNESCO's world heritage list.
            Aboard the comfortably appointed wooden motor yacht,
            there is ample time between cycles to swim in the azure waters and soak up the ambience of seaside towns.
        
    
    

        
@copyright southwest university
    

• 通过如上两个html页面对常用的html标签进行总结
  div标签：用于在文档中设定一个块区域 常用属性：align:left center right
  li标签：标签表示的是一个列表项
   type:这个属性只适用于无序列表，用于设定项目符号，默认值为disc
   value:这个属性只适用于有序列表，用于设定列表的项目数字
  ul标签：标签表示的是一个无序列表。type:规定列表的项目符号类型,可取值 disc,square,circle.默认值为disc

问题总结：li标签和ul标签的混合使用方法。

附：css代码

body {
  padding: 0 0 0 0;
  background-color: #ffffff;
  background-image: url(images/bg3-dark.jpg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: cover;
  font-family: Helvetica, Arial, sans-serif;
}
.nav {
  padding-left: 0;
  margin: 5px 0 20px 0;
  text-align: center;
}
.nav li {
  display: inline;
  padding-right: 10px;
}
.nav li:last-child {
  padding-right: 0;
}
.header {
  padding: 10px 10px 10px 10px;

}

.header a {
  color: #ffffff;
}
.header img {
  display: block;
  margin: 0 auto 0 auto;
}
.header h1 {
  text-align: center;
}

.main-content {
  width: 500px;
  padding: 20px 20px 20px 20px;
  border: 1px solid #dddddd;
  border-radius:15px;
  margin: 30px auto 0 auto;
  background: #fdffff;
  -webkit-box-shadow: 0 0 22px 0 rgba(50, 50, 50, 1);
  -moz-box-shadow:    0 0 22px 0 rgba(50, 50, 50, 1);
  box-shadow:         0 0 22px 0 rgba(50, 50, 50, 1);

}
h1, h2, h3 {
  color: #37A5F0;
}
h1 {
  color: #ffffff;
  margin: 10px 0 15px 0;
  text-align: center;
}
h2 {
  margin: 10px 0 20px 0;
  text-align: center;
  font-size: 26px;
  font-weight: bold;
}
h3 {
  margin: 15px 0 15px 0;
  border-bottom: 1px solid #CCCCCC;
  padding-bottom: 3px;
  font-size: 18px;
  font-weight: bold;
}
ul {
  padding: 0 0 0 50px;
}
ul li {
  margin: 0 0 5px 0;
}
ol {
  padding: 0 0 0 50px;
}

p {
    color: #505050;
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
}
hr {
    border:none;
    border-top:1px solid gainsboro;
    height:0;
}

.main-content {
  width: 500px;
  padding: 20px 20px 20px 20px;
  border: 1px solid #dddddd;
  margin: 30px auto 0 auto;
  background: #ffffff url(images/crossword.png) top left repeat;
}
.main-content p {
 line-height: 26px;
}
.photos {
  list-style-type: none;
  padding: 0;
}
.photos li {
  display: inline;
  padding-left: 11px;
}
.featured-image {
  width: 500px;
  height: 195px;
  background: #ffffff url(images/featured-cake.png) top left no-repeat;
}
.featured-image h3 {
  margin: 0;
  background-color: #333333;
  color: #ffffff;
  padding: 5px 0 5px 15px;
  text-transform: uppercase;
}
.footer {
  margin-top: 20px;
}
.footer p {
  color: #aaaaaa;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  font-style: italic;
  text-transform: uppercase;
}