效果图成型如下，颜色，其他的高度可以根据自己的需要进行调节，大概布局已完成，具体内容自行填充，CSS和JS部分自行分离
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0padding: 0
}
html,body{
width: 100%
height: 100%
}
#logo{
width: 100%
height: 20%
background: #40E0D0
}
#list{
width: 100%
/*height: 50px*/
}
ul>li{
width: 25%
/*height: 50px*/
float: left
list-style: none
text-align: center
line-height: 50px
}
select{
width: 100%
height: 50px
}
#content{
width: 100%
height: 70%
}
#left{
float: left
width: 80%
height: 100%
background: red
}
#right{
float: right
width: 20%
height: 100%
background: yellow
}
#right>a{
display: block
width: 100px
height: 50px
margin-top:50px
text-align: center
line-height: 50px
background: blueviolet
margin-left:30%
}
#text{
height: 40%
}
#image{
width: 100%
height: 60%
background-size:100% 100%
}
ul>li:nth-child(1)>select{background: aqua}
ul>li:nth-child(2)>select{background: greenyellow}
ul>li:nth-child(3){background: fuchsia}
ul>li:nth-child(4){background: yellowgreen}
</style>
</head>
<body>
<div id="logo">
logo，这个部分可以是一张图片或者，"canvas"
</div>
<div id="list">
<ul>
<li>
<select >
<option>子菜单1——1</option>
<option>子菜单1——2</option>
</select>
</li>
<li><select>
<option>子菜单2——1</option>
<option>子菜单2——2</option>
</select></li>
<li>
<a>菜单3 </a>
</li>
<li><a>菜单3</a></li>
</ul>
</div>
<div id="content">
<div id="left">
<div id="text">
立体文字还没有研究
</div>
<div id="image">
背景轮播图片,每7秒一张，首次加载有点慢。你也可以跟换成本地图片。
</div>
</div>
<div id="right">
<a>右一</a>
<a>右二</a>
</div>
</div>
<script type="text/javascript">
var backimage=document.getElementById("image")
var arr=["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529266314739&di=74c33905bd73f947c301bd75b59c3d66&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013a4456f2626f32f875a944208731.jpg%402o.jpg","https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2791035250,4080821670&fm=27&gp=0.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529266314735&di=935f676360cccf324acfff0c2f7be96f&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201408%2F20%2F183224gyeqynrs9irs0b0r.gif","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529265955947&di=0c66ddc401aa728c1698f189ca1ce16f&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201509%2F23%2F140610ebbookekbr1qbte1.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529265955946&di=d50620ba96dc70d26a0b356c19cc7fc6&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fd%2F570f4a85c88e6.jpg", ]
var i=-1
function backimg(){
i++
if( i>arr.length-1){
i=0
}
backimage.style.backgroundImage="url("+arr[i]+")"
setTimeout(backimg,7000)
}
backimg()
</script>
</body>
</html>
是可以做的。html是专门为网页制作而生的，css可以直接辅助html做样式制作。比如最早用的table，它也是html的标签，严格来说div也是html的标签，只是div可以很好地控制页面的布局设计，更好地进行分布式管理模块。
从起初的table+css至现在的div+css，甚至是css3，基础还是在html中扩展开来，比如之前DW里的个人网站制作，frame框架制作，层制作，特效的插入等等，都是由html+div+css来进行制作的。所以严格来说html+css是可以做出一个完整的网站的。
希望我的回答能令你满意！
