Web前台学习总结
2024-10-17 00:05:54
前台的技术有很多种,流行的框架也是枚不胜举,在这里我们只讨论html,css,js这些基本的技术,相信大家如果掌握了这些最基本的技术,其他的技术也就会使用了。
下面是一个案例的形式来讲解上述的技术。
首先我们在开发界面的时候,都需要先把网页的框架搭建起来,网页的框架一般都会分为三部分,头部,中间部分,底部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网站</title>
</head>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<body>
<div id="header">顶部</div>
<div id="main">
<div id="main1">
<div style="height: 600px;"></div>
</div>
</div>
<div id="footer">底部</div>
</body>
</html>
框架搭建好之后就是写我们的样式:样式的编写的时候,首先把不需要的样式去掉,在这里我自恋的把它命名为网页的初始化样式嘿嘿。
body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea{
margin: 0px;
padding: 0px;
font-size: 13px;
} ul{
list-style: none;
} img,a img{
border: 0px;
text-decoration: none;
} a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
页面样式的初始化完成之后,就是写我们自己在html中定义的div的样式,这些样式是我们根据需求来完成。
#header{
height: 452px;
background: url(../img/top_bg.jpg) repeat-x;
} #main{
background: url(../img/main_top_bg.jpg) repeat-x;
}
#main1{
background:url(../img/main1_bottom_bg.jpg) 0px bottom repeat-x;
} #footer{
height: 100px;
background: url(../img/footer_bg.jpg) repeat-x;
}
最新文章
- apache 配虚拟主机转发到tomcat
- 如何在arcmap中调试addin或者插件
- 【HBase】HBase Getting Started(HBase 入门指南)
- SqlServer-- NULL空值处理
- [ubuntu]--vim命令
- 73、django之setting配置汇总
- React Native随笔——组件TextInput
- BZOJ 1116: [POI2008]CLO [连通分量]
- 【前端性能】Web 动画帧率(FPS)计算
- SQLServer之创建隐式事务
- 使用Node.js搭建数据爬虫crawler
- springboot2 redis
- python文档-基本API命令翻译及使用方法!
- html特殊字体显示
- 学习Struts2经验总结
- window平台搭建Hudson服务器
- BZOJ3738 [Ontak2013]Kapitał 【扩展Lucas】
- logback -- 配置详解 -- 四 -- <;filter>;
- 【Oracle 12c】最新CUUG OCP-071考试题库(53题)
- MyEclipse 如何最佳设置
热门文章
- Ubuntu12.04 Skype4.2 提示Skype can&#39;t connect,安装Skype4.3
- vuex的简单使用
- 什么是LTE?
- Redis(三)-- 主从同步
- Android开发 Android Studio2.0 教程从入门到精通Windows版 - 入门篇
- tomcat的添加及jar包和jQuery的加载
- kerberos认证协议分析
- centos7上安装iptables
- JavaScript—文字自动变化为自定义颜色
- 模拟退火算法A Star not a Tree?(poj2420)