第一次用简书，苹果chrome贴代码贴了好久都贴不上最后解决思路换浏览器Safari不插入图片代码显示成功：），后面发布之后再修改再加入图片
显示效果
screenshot.png
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="jianshu.css">
</head>
<body>
<div class="container">
<div class="header">
<img src="images/blah.png">
<ul class="nav">
<li><a href="#"> Home</a></li>
<li><a href="#"> Site</a></li>
<li><a href="#"> Other</a></li>
</ul>
</div>
<div class="main-content">
<h2>The Beach</h2>
<hr>
<ul class="photos">
<li><img src="images/0001.jpg" width="150" height="150" alt="this is pic1"></li>
<li><img src="images/0003.jpg" width="150" height="150" alt="this is pic2"></li>
<li><img src="images/0004.jpg" width="150" height="150" alt="this is pic3"></li>
</ul>
<p>
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.
</p>
</div>
<div class="footer"></div>
<p class="copyright">©Mugglecoding</p>
</div>
</body>
</html>
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都可以实现效果
