前端开发如此简单（初级篇）

最新推荐文章于 2022-02-28 14:02:11 发布

BunnyCoffer

最新推荐文章于 2022-02-28 14:02:11 发布

阅读量852

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/BunnyCoffer/article/details/79267739

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端开发如此简单，那怎么就开始简单的学习把。

首先我们要知道前端开发，涉及的组件内容：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="#" οnclick="addFavorite()">加入收藏</a></li>
            <li><a href="#" οnclick="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 οnclick="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;  /*右边内边距*/
}

BunnyCoffer

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端开发如此简单（初级篇）

前端开发如此简单，那怎么就开始简单的学习把。首先我们要知道前端开发，涉及的组件内容：html+css+js。html是页面，css是对页面进行样式的处理，js是对组件的动态处理。第一步：首先我们要了解css和html是怎么关联的。非常简单只需要一句话（盒子）link href="box.css" rel="stylesheet">然后让我们创建index.htm
复制链接

扫一扫