前端基础之设计一个个人工作室介绍界面
先上效果图:
包含五个板块
home、about、portfolio、contact和footer
底部的图片不动,就像板块浮在上面。
css文件:(取名为studio.css)
![](/assets/blank.gif)
![](/assets/blank.gif)
1 html,body{ 2 padding:0; 3 margin: 0; //解决了底部footer跟浏览器的间隙问题 4 } 5 *{ 6 box-sizing: border-box; 7 } 8 *:hover{ 9 box-sizing: border-box; 10 } 11 body{ 12 overflow-x:hidden; 13 } 14 a{ 15 text-decoration: none; 16 color:#272822; 17 } 18 a:hover{ 19 color: #fff; 20 } 21 ul{ 22 list-style-type: none; 23 margin-left: 780px; 24 } 25 li{ 26 display: inline; 27 margin-left: 30px; 28 } 29 h1{ 30 font-size: 60px; 31 color: #B8B7B6; 32 line-height: 1.1; 33 } 34 h2{ 35 font-size: 40px; 36 } 37 h3{ 38 font-size: 30px; 39 } 40 .text-center{ 41 text-align: center; 42 } 43 .font-style{ 44 font-family: Georgia; 45 margin-top: 120px; 46 } 47 .header-nav{ 48 position:fixed; 49 z-index:1000;//以上两句共同解决导航栏不随滚动条滚动,并且滑动的div从导航栏后面滑上去 50 float: left; 51 top: 0; 52 left: 0; 53 background-color:#8A8A88; 54 width: 100%; 55 } 56 .nav-brand{ 57 margin-left: 30px; 58 float: left; 59 60 } 61 .nav-li-style{ 62 font-size: 19px; 63 font-family: Georgia; 64 text-align: center; 65 color: #000; 66 } 67 .bg-img{ 68 position:fixed; 69 float: left; 70 background:url("http://7xtsii.com1.z0.glb.clouddn.com/2.jpg"); 71 width:100%; 72 height: 90%; 73 margin-top: 50px; 74 left: 0; 75 top: 0; 76 } 77 #container{ //把五个板块放到一个div里面 78 width: 1400px; 79 height: 3500px; 80 position: relative; 81 float: left; 82 } 83 .container-block{ //五个div 84 width: 80%; 85 height: 800px; 86 margin-left: 110px; 87 margin-right: 80px; 88 } 89 .home-style{ //bome板块 90 margin-top: 60px; 91 padding-top: 68px; 92 } 93 .home-intro-divider{ 94 border-top: 1px solid #f8f8f8; 95 border-bottom: 1px solid rgba(0, 0, 0, 0.2); 96 } 97 .about-style{//about板块 98 position: relative; 99 100 } 101 .about-introduce{ 102 position: absolute; 103 width: 400px; 104 height: 200px; 105 margin-left: 30px; 106 font-family: Georgia; 107 108 } 109 .about-introduce-seay{ 110 font-size: 25px; 111 } 112 .about-people-img{ 113 position: absolute; 114 top: 200px; 115 right: 90px; 116 width: 400px; 117 height: 300px; 118 119 } 120 .about-smaller-img{ 121 width: 280px; 122 height: 280px; 123 border-radius: 50%; 124 } 125 .portfolio-title{ //portfolio:放应用板块 126 position: relative; 127 width: 1000px; 128 height:200px; 129 } 130 .portfolio-block{ //六个框框 131 position: relative; 132 float: left; 133 width: 310px; 134 height: 280px; 135 background-color: #DADFE1; 136 margin:20px 20px 20px 40px; 137 transition: all 0.6s; 138 outline: #A19FAC inset 10px; 139 text-align: center; 140 } 141 .portfolio-block:hover{ 142 box-shadow:30px 30px 30px rgba(0, 0, 0, 0.9);//标记 143 } 144 .portfolio-hover{ 145 position: absolute; 146 width: 300px; 147 height: 180px; 148 transition: all 0.6s; 149 150 } 151 .portfolio-hover:hover{ 152 background:rgba(0, 0, 0, 0.7)none repeat scroll 0 0; 153 transition: all 0.6s;//缓慢延伸 154 } 155 .portfolio-hover-incon{ 156 position: absolute; 157 width: 300px; 158 height: 30px; 159 text-align: center; 160 margin-top: 40px; 161 162 } 163 .portfolio-small-img{ 164 width: 280px; 165 height: 150px; 166 margin-left: 10px; 167 } 168 .portfolio-apply-title{ 169 background-color:#1C1D1F; 170 position: absolute; 171 width: 300px; 172 height: 90px; 173 margin-top: 30px; 174 text-align: center; 175 color: white; 176 } 177 .portfolio-apply-title.h4{ 178 font-size: 25px; 179 } 180 .contact-style{ //联系界面 181 padding-top: 50px; 182 } 183 .contact-tip{ 184 position: relative; 185 float: left; 186 width: 600px; 187 margin-top: 130px; 188 189 } 190 .contact-ways{ 191 position: relative; 192 float: right; 193 top:40px; 194 width: 350px; 195 height: 600px; 196 } 197 .ul-position{ 198 position: relative; 199 float: right; 200 margin-right: 100px; 201 margin-top: 130px; 202 } 203 .home-btn-style{ 204 margin-left: 180px; 205 } 206 .btn-style{ 207 background-color: #C0C0C0; 208 border:2px outset #000; 209 font-size: 20px; 210 border-radius: 4px; 211 box-shadow:3px 3px 3px rgba(0, 0, 0, 0.5);//标记 212 display:inline-block; 213 padding:10px 16px; 214 margin: 6px; 215 transition: all 0.21s; 216 letter-spacing: 2px; 217 } 218 219 .btn-style:hover{ 220 background:rgba(0, 0, 0, 0.9) none repeat scroll 0 0; 221 border:2px outset rgba(0, 0, 0, 0.9); 222 letter-spacing: 2px; 223 transform: scale(1.11);//放大 224 transition: all 0.21s;//缓慢延伸 225 } 226 .portfolio-font{ 227 font-family: Georgia; 228 font-size: 50px; 229 } 230 .contact-font{ 231 font-family: Cursive; 232 } 233 .home-btn{ 234 float: left; 235 } 236 .contact-btn{ 237 margin-left: 0; 238 float: right; 239 } 240 .btn-position{ 241 position: relative; 242 margin-top: 20px; 243 margin-left: 30px; 244 } 245 .bottom-nav{ //footer板块 246 width: 1349px; 247 height: 220px; 248 padding: 0; 249 margin: 0; 250 } 251 .bottom-nav-ul{ 252 background-color: #C6C6C6; 253 position: relative; 254 float: left; 255 width: 100%; 256 height: 120px; 257 margin-top: 20px; 258 padding-top: 20px; 259 260 } 261 .bottom-nav-li{ 262 width: 100%; 263 color: #6E7AB7; 264 } 265 .bottom-tip{ 266 position: absolute; 267 margin-top: 60px; 268 margin-left: 90px; 269 color: #7B7777; 270 }
View Code
html文件:
![](/assets/blank.gif)
![](/assets/blank.gif)
1 <html> 2 <head> 3 <meta name="generator" 4 content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> 5 <meta charset="UTF-8" /> 6 <link href="font-awesome-4.5.0/font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet" > 7 <link href="font-awesome-4.5.0/font-awesome-4.5.0/css/font-awesome-ie7.min.css" rel="stylesheet" > 8 <link href="studio.css" rel="stylesheet"> 9 <title></title> 10 <style type="text/css"> 11 12 </style> 13 </head> 14 <body> 15 <div class="header-nav"> 16 <nav> 17 <a href="http://virtual-dawn.com/index_english.html" class="nav-brand nav-li-style"> Thiago Ferreira</a> 18 <ul> 19 <li><a href="#home" class="nav-li-style">Home</a></li> 20 <li><a href="#about" class="nav-li-style">About</a></li> 21 <li><a href="#portfolio" class="nav-li-style">Portfolio</a></li> 22 <li><a href="#contact" class="nav-li-style">Contact</a></li> 23 </ul> 24 </nav> 25 </div> 26 <div class="bg-img"> 27 </div> 28 <a name="home"></a> 29 <div id="container"> 30 <div class="home-style container-block"> 31 <h1 class="text-center font-style">Infinito Web Design Studio</h1> 32 <h3 class="text-center">Where Awesomeness Is Brought To Life.</h3> 33 <hr class="home-intro-divider" /> 34 <div class="home-btn-style"> 35 <a href="https://twitter.com/Ferreir4Thiago" target="blank" class="btn-position home-btn btn-style "><i class="fa fa-twitter fa-fw"></i><span class="network-name"><strong>Twitter</strong></span></a> 36 <a href="https://github.com/Lynn081" target="blank" class="btn-position home-btn btn-style"><i class="fa fa-github fa-fw"></i><span class="network-name"><strong>Github</strong></span></a> 37 <a href="https://www.linkedin.com/profile/guided?dl=no&trk=uno-choose-ge-no-intent" target="blank" class="btn-position home-btn btn-style "><i class="fa fa-linkedin fa-fw"></i><span class="network-name "><strong>Linkedin</strong></span></a> 38 <a href="https://www.freecodecamp.cn/lynn081" target="blank" class="btn-position home-btn freecode-btn btn-style"><i class="fa fa-fire fa-fw"></i><span class="network-name"><strong>freeCodeCamp</strong></span></a> 39 </div> 40 </div> 41 <a name="about"></a> 42 <div class="about-style container-block"> 43 <div class="about-introduce"> 44 <h2>Infinito Web Design Studio</h2> 45 <p class="about-introduce-seay">My name is Lynn!I'm a self taught web designer, developer, co-founder and entrepreneur based in Finland. I'm currently part of a small web development team in an upcoming start-up, building web and mobile applications. My passion is to use technology based solutions, to help solve real world challenges. Competences: Languages and Frameworks: Javascript, HTML5, CSS3, jQuery, Bootstrap3, Angular.js, Meteor.js. Tools & expertise: Git, Responsive Web Design, Agile Methodologies.</p> 46 </div> 47 <div class="about-people-img"> 48 <img class="about-smaller-img" src="me.jpg" /> 49 </div> 50 </div> 51 <a name="portfolio"></a> 52 <div class="portfolio-style container-block"> 53 <div class="portfolio-title"> 54 <h2 class="text-center portfolio-font">Awesomeness Portfolio</h2> 55 <h3 class="text-center">Below you'll find some of my recent work.</h3> 56 </div> 57 <div class="portfolio-block"> 58 <a href="应用1"> 59 <div class="portfolio-hover"> 60 <div class="portfolio-hover-incon"> 61 <i class="fa fa-fire fa-3x"></i> 62 </div> 63 </div> <img class="portfolio-small-img" src="a.jpg" /> </a> 64 <div class="portfolio-apply-title"> 65 <h4>My 1st apply</h4> 66 <p>css and JavaScript</p> 67 </div> 68 </div> 69 <div class="portfolio-block"> 70 <a href="应用2"> 71 <div class="portfolio-hover"> 72 <div class="portfolio-hover-incon"> 73 <i class="fa fa-fire fa-3x"></i> 74 </div> 75 </div> <img class="portfolio-small-img" src="b.jpg" /> </a> 76 <div class="portfolio-apply-title"> 77 <h4>My 1st apply</h4> 78 <p>css and JavaScript</p> 79 </div> 80 </div> 81 <div class="portfolio-block"> 82 <a href="应用3"> 83 <div class="portfolio-hover"> 84 <div class="portfolio-hover-incon"> 85 <i class="fa fa-fire fa-3x"></i> 86 </div> 87 </div> <img class="portfolio-small-img" src="c.jpg" /> </a> 88 <div class="portfolio-apply-title"> 89 <h4>My 1st apply</h4> 90 <p>css and JavaScript</p> 91 </div> 92 </div> 93 <div class="portfolio-block"> 94 <a href="应用4"> 95 <div class="portfolio-hover"> 96 <div class="portfolio-hover-incon"> 97 <i class="fa fa-fire fa-3x"></i> 98 </div> 99 </div> <img class="portfolio-small-img" src="d.jpg" /> </a> 100 <div class="portfolio-apply-title"> 101 <h4>My 1st apply</h4> 102 <p>css and JavaScript</p> 103 </div> 104 </div> 105 <div class="portfolio-block"> 106 <a href="应用5"> 107 <div class="portfolio-hover"> 108 <div class="portfolio-hover-incon"> 109 <i class="fa fa-fire fa-3x"></i> 110 </div> 111 </div> <img class="portfolio-small-img" src="e.jpg" /> </a> 112 <div class="portfolio-apply-title"> 113 <h4>My 1st apply</h4> 114 <p>css and JavaScript</p> 115 </div> 116 </div> 117 <div class="portfolio-block"> 118 <a href="应用6"> 119 <div class="portfolio-hover"> 120 <div class="portfolio-hover-incon"> 121 <i class="fa fa-fire fa-3x"></i> 122 </div> 123 </div> <img class="portfolio-small-img" src="f.jpg" /> </a> 124 <div class="portfolio-apply-title"> 125 <h4>My 1st apply</h4> 126 <p>css and JavaScript</p> 127 </div> 128 </div> 129 </div> 130 <a name="contact"></a> 131 <div class="contact-style container-block"> 132 <div class="contact-tip"> 133 <h3 class="contact-font">Connect with Infinito Web Design Studio:<br /> 1090023975@qq.com</h3> 134 </div> 135 <div class="contact-ways"> 136 <ul class="ul-position"> 137 <li><a href="https://twitter.com/Ferreir4Thiago" target="blank" class="btn-position home-btn btn-style "><i class="fa fa-twitter fa-fw"></i><span class="network-name"><strong>Twitter</strong></span></a></li> 138 <li><a href="https://github.com/Lynn081" target="blank" class="btn-position home-btn btn-style"><i class="fa fa-github fa-fw"></i><span class="network-name"><strong>Github</strong></span></a></li> 139 <li><a href="https://www.linkedin.com/profile/guided?dl=no&trk=uno-choose-ge-no-intent" target="blank" class="btn-position home-btn btn-style "><i class="fa fa-linkedin fa-fw"></i><span class="network-name "><strong>Linkedin</strong></span></a></li> 140 <li><a href="https://www.freecodecamp.cn/lynn081" target="blank" class="btn-position home-btn freecode-btn btn-style"><i class="fa fa-fire fa-fw"></i><span class="network-name"><strong>freeCodeCamp</strong></span></a></li> 141 </ul> 142 </div> 143 </div> 144 </div> 145 <footer class="bottom-nav"> 146 <div class="bottom-nav-ul"> 147 <ul class="nav-brand"> 148 <li><a href="#home"><span class="bottom-nav-li"><strong>Home</strong></span></a></li> 149 <li><a>.</a></li> 150 <li><a href="#about"><span class="bottom-nav-li"><strong>About</strong></span></a></li> 151 <li><a>.</a></li> 152 <li><a href="#portfolio"><span class="bottom-nav-li"><strong>Portfolio</strong></span></a></li> 153 <li><a>.</a></li> 154 <li><a href="#contact"><span class="bottom-nav-li"><strong>Contact</strong></span></a></li> 155 </ul> 156 <p class="bottom-tip">Copyright © Infinito Web Design Studio 2015. All Rights Reserved</p> 157 </div> 158 </footer> 159 </body> 160 </html>
View Code
---------------------------------------------------------我是分割线---------------------------------------------
途中遇到的问题:
1、按钮效果过于生硬
2、导航栏不能固定在顶部,并且滚动页面时,页面从导航栏前面划过
3、footer、导航栏和背景图片都与浏览器之间有空隙
4、引用font Awesome icon
解决问题:
1、按钮按下去过于生硬是由于忽略了一个属性 "transition" ,没错,仔细学习发现这个属性让一切都变得那么温和,哈哈
2、导航栏问题:
position:fixed;
z-index:1000;
top:0;
left:0;
解决了空隙问题,以及滚动页面时页面从导航栏后面滑进去
3、间隙问题:
背景图片:放在一个div里面,看代码可以知道我设置成了position:fixed; left:0;解决了间隙问题,原本打算把图片放在body里面,但是这样做图片会跟着滚动条一起滚动。
footer:起初把width:100%都不管用,就是有空隙,然而又不能设置成fixed吧!就这样:
html,body{
padding:0;
margin: 0; //解决了底部footer跟浏览器的间隙问题
}
4、引用了font awesome icon 神奇的图库,省了不少事。下载完毕后,在自己的项目中加入link,注意里面的href是相对路径!!!!!就是把解压后的文件里的这货放进去:
font-awesome.min.css。然后就可以开心地使用图标了~~~
补充说明:
由于还是新手,并没有做应用,所以在界面的应用板块的六个框框里面木有放应用(苦逼脸.png)后续会更新自己做的小应用。
最后一句:有任何指教请留言或邮件,感激不尽!
转载于:https://www.cnblogs.com/Lynn0814/p/5744671.html
前端基础之设计一个个人工作室介绍界面相关推荐
- 如何用Java设计一个简单的窗口界面(学习中.1)
如何用Java设计一个简单的窗口界面 一.前言 二.简单了解 1.Swing简介 2.框架(frame) 3.层次 三.步骤 1.打开eclipse,依次创建项目,包,类. 2.代码 2.1最简单的可 ...
- 前端基础知识点-每天一个基本知识点(100+个前端小知识,你是否都知道?)
文章目录 前言 第一回合 一.知识点:cookie(21/09/06) 二.知识点:节流和防抖(21/09/07) 三.知识点:var和let以及const(21/09/08) 四:知识点:深拷贝和浅 ...
- 转载 前端基础知识体系 一个新手的学习之路
原帖地址: 转载的原因是我学习前端和php已经4个多月了.看看自己还有那些不足.自己得努力学习,牛人太多.红色是我会的,或者学过的.希望今天把大部分飘红. 一.HTML 标签的分类 标签表示一个元素 ...
- Python面向对象基础练习——设计一个名为 MyRectangle 的矩形类来表示矩形
# 设计一个名为 MyRectangle 的矩形类来表示矩形.这个类包含 # (1) 左上角顶点的坐标:x,y # (2) 宽度和高度:width.height # (3) 构造方法:传入 x,y,w ...
- 用vue设计一个漂亮的登录界面
你好! 在 Vue 中设计一个漂亮的登录界面可以使用以下步骤: 准备好所需的图片和样式文件,包括背景图片和字体. 在 Vue 组件的 template 部分中,使用 HTML 元素和组件创建登录表单的 ...
- Python列表实现矩阵的创建、输入输出、转化转置、加减乘运算并设计一个矩阵计算器GUI界面
背景:在解决一些编程问题中如棋盘的初始化,链表,队列的构建:数据处理中如用SAS软件输入数据等涉及到矩阵的概念,而用编程语言实现矩阵的方式有C中的数组,python中的列表等.现在给你一个数据如下,或 ...
- 如何在自己的信息管理系统里集成第三方权限控制组件 - 设计一个漂亮的WEB界面...
我们大家都梦想有个完美的各种信息管理系统,其实一个人又会数据库,又会C#.NET程序,还要精通HTML,还要精通CSS,更要精通JS,还有精力去写很多东西,又要调试前台又要调试后台,而且每开发一个系统 ...
- 如何用Java设计一个简单的窗口界面(初级二)
如何添加组件 一.准备 1.这里介绍的是eclipse 2.常用组件的了解 3.常用布局 1.BorderLayout 布局 2.FlowLayout 布局 二.代码 1.简单的 2.构造中间容器,顺 ...
- 前端基础---设计篇
很多打算学习前端的同学估计都在培训机构学习过 ,但是很少有机构会培训前端的审美,以及设计基础以及理论.接下来我为大家讲解的是网页的设计以及网页的构成,和用色. 在讲解之前我给大家抛个引子网页中占比最多 ...
最新文章
- C++深拷贝与浅拷贝
- 一文梳理缺陷检测方法
- Linux下shell脚本之双色球摇号脚本
- 【Python基础】刷爆网络的动态条形图,3行Python代码就能搞定
- 【struts2】struts2实现自定义数据类型转换器
- 线程间通信————同步
- php 显示目录列表,php读取目录列表与文件列表的代码举例
- 某交规模拟考试系统验证绕路手记
- 虚拟机中Ubuntu IP地址漂移问题解决(为Ubuntu配置固定IP地址)
- java读取bny_java转义字符
- SQL2008-显示表大小行数
- 【Note2】MPS/PXE/ADS/INA电流电压,i2c设备在位和读,samba/nfs,ntp/log/me/树莓派,pip/office,vr,i2ctool,大数据,pam
- Appium的工作原理终于搞清楚了
- Ubuntu20.04安装增强功能
- 公众号滑动图代码_微信公众号文章滑动图片怎么做的呢?
- win10浏览器加载很慢_Win10 IE浏览器的网页加载速度很慢总是卡死怎么办
- iOS开发 iPhone各型号的屏幕参数对照表 (pt 、px)
- electron打包时报错could not find: “C:\Users\xxxx\AppData\Local\Temp\t-OLh5E0\0-messages.nsh“
- [RK3399][Android7.1.1]Tethering:修复使用USB共享网络,拔出USB后 USB共享没有自动关闭的问题
- Python中文文本分句