关于#javascript#的问题：我想要实现下图的效果，有没有人可以提供一下代码，让我学习学习
我现在在学习前端的内容，我想要实现下图的效果，但是自己有想法，却无从下手，有没有人可以提供一下代码，让我学习学习。
右键查看源代码，全是，哈哈哈哈
这些是html 和css 样式。网页上用例有很多。
题主这些效果大多数都是border-radius就能解决的，大概写了个第一个的。其他照弄了
<!doctype html>
<meta charset="utf-8" />
<style>body{padding:0;margin:0}
.clear{overflow:hidden;clear:both}
ul,li{list-style:none;padding:0;margin:0}
a{text-decoration:none}
.wrap{max-width:1024px;margin:0 auto;padding-bottom:30px}
.header{position:relative;padding:20px 10px;padding-left:0}
.header .nav{float:left;}
.header .nav ul{margin:0;padding:0}
.header .nav li{float:left;list-style:none;padding:0 10px;}
.header .nav ul li:first-of-type{padding-left:0}
.header a{color:#333;text-decoration:none;}
.header .nav li a.cur{color:sandybrown;}
.header .logo{position:absolute;left:50%;top:50%;margin-left:37px;margin-top:-15px;}
.header .logo img{height:30px}
.header .search,.header .user{float:right}
.header .search{border:solid 1px #333;border-radius:20px;position:relative;padding:0 10px}
.header .search input{display:block;border:none;line-height:20px;outline:none}
.header .search button{position:absolute;right:0;top:0;border-radius:50%;background:transparent;border:none}
.header .user{margin-left:10px}
.banner{height:200px;background:#ccc}
.content{max-width:860px;margin:0 auto;}
.content .title{border-bottom:solid 1px #ccc;line-height:30px;margin-bottom:20px;margin-top:30px}
.content .title a{float:right;color:Highlight;text-decoration:none}
.col3 li{width:30%;float:left;margin-right:5%}
.col3 li:last-child{margin-right:0}
.travel{font-size:12px;}
.travel img{display:block;width:100%;height:200px;border-radius:40px;background:#eee;border:none;margin-bottom:10px}
.travel a{font-size:13px;margin:10px 0;display:block;color:#333}
.video li{width:25%;float:left;font-size:12px}
.video li:first-of-type{width:65%;margin-right:10%}
.video img.big{border-radius:50px;height:300px;display:block;border-bottom-right-radius:0;background:#eee;border:1px #ccc solid;width:100%;}
.video .playlist{border:solid 1px #ccc;border-radius:15px;padding:10px}
.video .playlist .playitem{overflow:hidden;margin-top:10px}
.video .playlist .playitem img{float:left;width:40%;margin-right:5px;height:50px;border-radius:15px;border-bottom-right-radius:0;}
.video .playlist .playitem time{color:sandybrown;display:block}
.col4 li{width:23.5%;margin-right:2%;float:left}
.col4 li:last-of-type{margin-right:0}
.col4 li img{max-width:100%;height:320px;display:block;border-radius:30px;border-bottom-right-radius:0;}
.col4 li img:hover{box-shadow:10px 20px 30px #888888;transform:scale(1.05) }
.foot{clear:both;padding:20px;background:#eee;margin-top:20px}
</style>
<div class="wrap">
<div class="header clear">
<div class="nav">
<ul class="clear">
<li><a href="#" class="cur">首页</a></li>
<li><a href="#">目的地</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">机票</a></li>
<li><a href="#">酒店民宿</a></li>
<li><a href="#">旅游商城</a></li>
</ul>
</div>
<div class="logo">
<img src="images/logo.png" />
</div>
<div class="user">
<a href="#">登录</a>/<a href="#">注册</a>
</div>
<div class="search">
<input type="text" placeholder="搜索您向往的目的地" name="search" />
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
<div class="banner">
banner图片或者slider，题主自己找下焦点图插件，推荐swiper
</div>
<div class="content">
<div class="title">
<strong>最新游记</strong><a href="#">发布游记</a>
</div>
<ul class="col3 travel clear">
<li>
<img alt="" src="https://www.aspensnowmass.com/-/media/aspen-snowmass/images/featured-content-row/silver-queen-featured-content-row-081921.ashx" />
2010-12-1
<a href="#"><strong>标题标题标题</strong></a>
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字
</li>
<li>
<img alt="" src="https://www.aspensnowmass.com/-/media/aspen-snowmass/images/featured-content-row/silver-queen-featured-content-row-081921.ashx" />
2010-12-1
<a href="#"><strong>标题标题标题</strong></a>
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字
</li>
<li>
<img alt="" src="https://www.aspensnowmass.com/-/media/aspen-snowmass/images/featured-content-row/silver-queen-featured-content-row-081921.ashx" />
2010-12-1
<a href="#"><strong>标题标题标题</strong></a>
描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字
</li>
</ul>
<div class="title">
<strong>热门视频</strong><a href="#">查看更多</a>
</div>
<ul class="video clear">
<li>
<img class="big" alt="" src="https://www.aspensnowmass.com/-/media/aspen-snowmass/images/featured-content-row/silver-queen-featured-content-row-081921.ashx" />
</li>
<li>
<div class="playlist">
播放列表<br />
<div class="playitem">
<img class="big" alt="" src="https://www.aspensnowmass.com/-/media/aspen-snowmass/images/featured-content-row/silver-queen-featured-content-row-081921.ashx" />
视频标题视频标题视频标题视频标题
<time>内容</time>
</div>
<div class="playitem">
<img class="big" alt="" src="https://www.aspensnowmass.com/-/media/aspen-snowmass/images/featured-content-row/silver-queen-featured-content-row-081921.ashx" />
视频标题视频标题视频标题视频标题
<time>内容</time>
</div>
<div class="playitem">
<img class="big" alt="" src="https://www.aspensnowmass.com/-/media/aspen-snowmass/images/featured-content-row/silver-queen-featured-content-row-081921.ashx" />
视频标题视频标题视频标题视频标题
<time>内容</time>
</div>
<div class="playitem">
<img class="big" alt="" src="https://www.aspensnowmass.com/-/media/aspen-snowmass/images/featured-content-row/silver-queen-featured-content-row-081921.ashx" />
视频标题视频标题视频标题视频标题
<time>内容</time>
</div>
</div>
</li>
</ul>
<div class="title">
<strong>精选主题</strong><a href="#">查看更多</a>
</div>
<ul class="col4">
<li>
<img class="big" alt="" src="https://www.aspensnowmass.com/-/media/aspen-snowmass/images/featured-content-row/silver-queen-featured-content-row-081921.ashx" />
</li>
<li>
<img class="big" alt="" src="https://www.aspensnowmass.com/-/media/aspen-snowmass/images/featured-content-row/silver-queen-featured-content-row-081921.ashx" />
</li>
<li>
<img class="big" alt="" src="https://www.aspensnowmass.com/-/media/aspen-snowmass/images/featured-content-row/silver-queen-featured-content-row-081921.ashx" />
</li>
<li>
<img class="big" alt="" src="https://www.aspensnowmass.com/-/media/aspen-snowmass/images/featured-content-row/silver-queen-featured-content-row-081921.ashx" />
</li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="foot">
页脚，题主自己弄下了，就是float布局而已
</div>
谷歌浏览器右侧的三个点，更多工具 =》网页另存为，这样就会将当前网页的代码下载下来
div+flex布局