前端开发如此简单(初级篇)
前端开发如此简单,那怎么就开始简单的学习把。
首先我们要知道前端开发,涉及的组件内容:html+css+js。html是页面,css是对页面进行样式的处理,js是对组件的动态处理。
第一步:首先我们要了解css和html是怎么关联的。非常简单只需要一句话(盒子)
<link href="box.css" rel="stylesheet">
然后让我们创建index.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习</title> <link href="box.css" rel="stylesheet"> </head> <body> <div class="box1"> 这是盒子1</div> <div class="box2"> 这是盒子2</div> </body> </html>然后. box.css 文件如下:
.box1{ width: 100px; /*--宽高指的是内容区域,内边距和外边距不会影响他的宽高--*/ height: 120px; border: 1px solid #F00; /*--设置边框的粗细和颜色--*/ margin-bottom: 10px; /*--外边距,距离底部组件的距离--*/ padding-left:10px; /*--内边距,距离左边边框的距离--*/ float: left; /*--该组件向左浮动--*/ } .box2{ width: 200px; height: 220px; border: 1px solid #F00; clear: left; /*--禁止该组件的左边有浮动,这样也等于box1的浮动没有意义了--*/ }
第二步:开始实际开发
首先让我们设计个网址首页,如下:
页面顶部区的制作:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习</title> <link href="css/box.css" rel="stylesheet"> <script src="js/index.js" type="text/javascript"></script> </head> <body> <!--页面头部--> <div class="top"> <div class="top_content"> <ul> <li><a href="#" >联系我们</a></li> <li><a href="#" onclick="addFavorite()">加入收藏</a></li> <li><a href="#" onclick="setHome(this,window.location)">设为首页</a></li> </ul> </div> </div> </body> </html>
box.css
/*--初始化样式--*/ *{ margin: 0; padding: 0; font-size: 12px; } body{ background-color: #F5F5F5; } /*--网页头部样式--*/ .top{ width: 100%; height: 27px; } .top_content{ width: 1000px; margin: 0 auto; /*--上下边距为0,左右为自动,同时设置了宽,就可以让其在父组件中部--*/ } .top_content li{ float: right;/*--组件右浮动--*/ width:70px; line-height: 27px;/*--盒子中的文字垂直居中--*/ } /*--组件超连接 初始状态和访问后的状态--*/ .top_content a:link, .top_content a:visited{ color: #8E8E8E; text-decoration: none; /*--没有下划线--*/ } /*--组件超连接 获取焦点状态和点击状态--*/ .top_content a:hover, .top_content a:active{ color: #900; text-decoration: none; }
index.js
//设为首页 <a onclick="setHome(this,window.location)">设为首页</a> function setHome(obj,vrl){ try{ obj.style.behavior='url(#default#homepage)';obj.setHomePage(vrl); } catch(e){ if(window.netscape) { try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); } catch (e) { alert("此操作被浏览器拒绝!\n请在浏览器地址栏输入“about:config”并回车\n然后将 [signed.applets.codebase_principal_support]的值设置为'true',双击即可。"); } var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch); prefs.setCharPref('browser.startup.homepage',vrl); } } } <!-- 加入收藏 --> function addFavorite() { var url = window.location; var title = document.title; var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf("msie 8") > -1) { external.AddToFavoritesBar(url, title, '');//IE8 } else { try { window.external.addFavorite(url, title); } catch (e) { try { window.sidebar.addPanel(title, url, "");//firefox } catch (e) { alert("加入收藏失败,请使用Ctrl+D进行添加"); } } } }
这样网页的顶部区域就完成了。
第二步,我们开始编写logo区域
<!--页面wrap区域--> <div class="wrap"> <!--页面logo区域--> <div class="logo"> <div class="logo_left"> <img src="image/logo.png" alt="慕课网"> </div> <div class="logo_right"> <img src="image/logo_s.png" alt="服务热线">24小时服务热线:<span class="tel">123-123-234</span> </div> </div> <!--页面logo区域结束--> </div>css样式
.wrap{ width: 1000px; margin: 0 auto;/*--水平居中--*/ } .logo{ height: 50px; background-color: #FFF; } .logo_left{ width: 200px; float: left; } .logo_right{ width: 300px; float: right; height: 28px; margin-top: 15px; color: #8E8E8E; } .logo_right img{ margin-right: 10px; vertical-align: middle;/*--内部内容,垂直居中--*/ } .tel{ font-family: Aparajita; /*--字体样式--*/ font-size: 16px; /*--字体大小--*/ color: #990000; /*--字体颜色--*/ }
第三步:导航区域
<!--页面wrap区域--> <div class="wrap"> <!--页面logo区域--> <div class="logo"> <div class="logo_left"> <img src="image/logo.png" alt="慕课网"> </div> <div class="logo_right"> <img src="image/logo_s.png" alt="服务热线">24小时服务热线:<span class="tel">123-123-234</span> </div> </div> <!--页面logo区域结束--> <!--页面导航区域--> <div class="nav"> <!--页面导航左边区域--> <div class="nav_left"></div> <!--页面导航中间区域--> <div class="nav_mid"> <div class="nav_mid_left"> <ul> <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> <li><a href="#">人才招聘</a> </li> </ul> </div> <div class="nav_mid_right"> <form action="" method="post"> <input type="text" class="search_text"> </form> </div> </div> <!--页面导航右边区域--> <div class="nav_right" ></div> </div> <!--页面导航区域结束--> </div> <!--页面wrap区域结束-->
导航区域的css
/*--导航区域--*/ .nav{ height: 40px; } .nav_left{ width: 10px; background:url("../image/nav_left.png") no-repeat; float: left; height: 40px; } .nav_mid{ width: 980px; background:url("../image/nav_right.png") repeat-x; float: left; } .nav_right{ width: 10px; background:url("../image/nav_left.png") no-repeat; float: left; height: 40px; } .nav_mid_left,.nav_mid_right{ float: left; } .nav_mid_left{ width: 680px; } .nav_mid_right{ width: 300px; } .nav_mid_left li{ float: left; list-style-type: none; width: 100px; text-align: center; line-height: 40px; /*--将字体的高度设置为容器的宽高,就实现了文字居中--*/ } /*--导航未点击和点击过后的状态--*/ .nav_mid_left a:link,.nav_mid_left a:visited{ text-decoration: none; /*去掉下划线*/ color: #FFFFFF; font-size: 16px; font-family: "微软雅黑"; } /*--导航经过和点击过后的状态--*/ .nav_mid_left a:hover,.nav_mid_left a:active{ text-decoration: none; /*去掉下划线*/ color: #FF0; font-size: 16px; font-family: "微软雅黑"; } /*搜索框的样式*/ .search_text{ width: 190px; height: 25px; margin-top: 5px; background: url("../image/logo_s.png") no-repeat right center; /*给搜索框添加背景,重复方式,位置*/ background-color: #FFFFFF; padding-right: 25px; /*右边内边距*/ }