Python实战计划学习笔记 做一个网页

第一次用，苹果chrome贴代码贴了好久都贴不上最后解决思路换浏览器Safari不插入图片代码显示成功：），后面发布之后再修改再加入图片
显示效果

screenshot.png

    
     




    

        
        

            
 Home
            
 Site
            
 Other
        
        
    



    
The Beach
    


    

    

    

    

        


    


            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.






©Mugglecoding

css代码

html,body{height:100%; width:100%; overflow:hidden; margin:0;
padding:0;}

p {
    color: #505050;
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
}
h1, h2, h3 {
  color: #37A5F0;
}
        .container{
            width: 100%;
            height: 100%;
            background-image: url("images/bg3-dark.jpg");
            background-repeat: no-repeat;
            background-size: 100%;
            font-family: Helvetica, Arial, sans-serif;
        }

        .header img {
  display: block;
  margin: 0 auto 0 auto;
}
.header a {
  color: #ffffff;
}



.nav{
    text-align: center;
    margin: 5px 0 20px 0;
    padding-left: 0;
}
.nav li{
    display: inline;
    padding-right: 10px;

}

.nav li:last-child {
  padding-right: 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;
      border-radius:15px;
}
.photos {
  list-style-type: none;
  padding: 0;
}   
.photos li{
    display: inline;
    padding-left: 11px;
}

/*.footer p{
  color: #aaaaaa;
  text-align: center;
  font-weight: bold;
  font-size: 50px;
  font-style: italic;
  text-transform: uppercase;
}*/
.copyright{
      color: #aaaaaa;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  font-style: italic;
  text-transform: uppercase;
}

.footer {
  margin-top: 100px;
}

心得，实践出真知，多尝试不同的解决方案有时候不经意之间就能解决问题。HTML标签查阅w3c都可以实现效果