HTML+css网站设计布局模板

上下固定，左边固定，右边可以上下滑动，右侧有滑动条。
为保证原创性，css部分不出。

运行结果如下图：

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>个人主页模板</title><link href="style/style.css" rel="stylesheet" type="text/css" /><link rel="shortcut icon" href="#" />
</head><body><div class="nva"><img src="#" alt=""></div><div class="header"><div class="left"><div class="card"><div class="photo"><img src="#" alt=" "></div><h1>标题一</h1><h2>标题二</h2></div></div><div class="right"><div class="rig_upper">header</div><div class="rig_under">footer</div></div><div class="foot">foot</div></div>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */
*{margin: 0;
}
.nva{width: 100%;height: 50px;position: fixed;border-bottom: 2px solid #FFFFFF;
/*渐变色*/background: linear-gradient(500deg,#099，#099);
}
.nva img{width: 50px;height:50px;/* 绝对定位 */position: absolute;/*圆形高度*/border-radius: 50%;overflow: hidden;
}.left{width: 300px;height: 80%;bottom: 0;top: 52px;/*固定位置*/position: fixed;display: flex;left: 0;border-right: 2px solid #FFFFFF;/*浮动*/float: left;background: linear-gradient(3500deg,#394A58,#3280B0);
}.right{position: fixed;height: 80%;top: 52px;right: 0;bottom: 0;left: 302px;color: #FFFFFF;overflow-y: auto;background-color: #F5FF00;
}.right .rig_upper{width: 100%;height: 270px;top: 51px;background: linear-gradient(500deg,#394A58,#3280B0);
}
.right .rig_under{border-top: 1px solid #FFFFFF;width: 100%;height: 750px;background: linear-gradient(500deg,#394A58,#3280B0);}.foot{width: 100%;height: 80px;bottom: 0;position: fixed;color: #FFFFFF;border-top: 2px solid #FFFFFF;background: linear-gradient(500deg,#099,#369,#099);
}

HTML+css网站设计布局模板相关推荐

2007最优秀的CSS网站设计
很多人不知道的是,我同样是 Best Web Gallery 和 N.Design Studio"背后"的人. 2006年,我创建了Best Web Gallery,作为我发现的最 ...
推荐12款精心设计网站设计PSD模板
为什么80%的码农都做不了架构师?>>> 日期:2012-4-18 来源:GBin1.com PSD网站设计模板在我看来,是非常有效的制作工具之一. 它可以用在很多方面.比如 ...
《HTML与CSS网站设计实践之旅》读书笔记
HTML与CSS网站设计实践之旅 BuildYour Own Web Site the Right Way Using HTML & CSS --[英] Ian Lloyd [Example] ...
html网页读后感,《HTML与CSS网站设计实践之旅》读后感锦集
<HTML与CSS网站设计实践之旅>是一本由劳埃德著作,39.00元出版的2008-7图书,本书定价:337,页数:,特精心从网络上整理的一些读者的读后感,希望对大家能有帮助. <H ...
用html语言设计一个创意图案,10个独特的+创新的网站设计布局创意
创新的网站布局创意这个想法已经流传了一段时间了,常规的网站设计有一种千篇一律的感觉,实在是看多了会觉得有点无聊.今天就让我们潜入一些独特的和创新的网站设计布局,来打破常规吧! 责怪用户模式,太多的项目 ...
python个人信息管理系统登录注册增加日程_个人信息管理系统网站设计论文模板.docx...
个人信息管理系统网站设计论文模板个人信息管理系统网站设计摘要:随着互联网的高速发展,网络购物中心凭借其高效,低成本的优势,以电子商务作为随着信息技术的不断发展,信息技术对社会进步与国民经济发展起着越 ...
设计企业网站大纲_企业网站设计布局
网站制作一年350元,五站合一,快速建站 ,www.sxjcwzjs.com,只需进入网站右上角注册快速建站即可(需要电脑登录注册),需要联系我吧!电话:13752214574,微信号:m107858 ...
叮叮书店 about.html,网页编程HTML+CSS网站设计
压缩包 : 叮叮书店实例.zip 列表叮叮书店实例/ 叮叮书店实例/about.html 叮叮书店实例/accordion.html 叮叮书店实例/cart.html 叮叮书店实例/category ...
CSS开发-简单布局模板
实现图如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
html+css网站设计，比较简单,附代码
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>茅台酒 ...

HTML+css网站设计布局模板

HTML+css网站设计布局模板相关推荐

最新文章

热门文章