6、个人简介网站项目实战开发（首页开发一）宗九尘实战

2019-11-14宗九尘博客个人简介网站web项目实战1407

- N +

请记住投稿邮箱是：203239351@qq.com 注册联系QQ203239351

前言：

今天给大家实现一下网站首页开发一，做一个大封面，上面标题为刘翔-个人简介

网站建设.jpg

悬浮右侧导航栏功能：

1、盒子设置伸缩布局

2、添加背景图片

3、做跳转锚点

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简介网站项目实战开发（主页面开发一）宗波尘客</title>
    <style>
 .center1{
            height: 768px;
 /*height: 768px;固定高度为768像素*/
 padding: 0;
 /*padding: 0;内边距为0*/
 display: table;
 /*display: table;此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。*/
 width: 100%;
 width: 100%;宽度为100%，随浏览器的宽度变化而变化
 background: url(img/intro-bg.jpg) no-repeat 50% 50%;
 /*background: url(img/intro-bg.jpg) no-repeat 50% 50%;背景图片位置，并设置不平铺，和设置定位上下左右均50%*/
 }
        .center1_top{
            margin: 0 auto;
 /*margin: 0 auto;设置div水平居中*/
 margin-top: 164px;
 /*margin-top: 164px;设置顶部外边距为164像素*/
 max-width: 1366px;
 /*max-width: 1366px;设置盒子div宽度为最大1366像素*/
 height: 460px;
 /*height: 460px;高度为460像素*/
 text-align: center;
 /*text-align: center;让文字水平居中*/
 color: #fff;
 /*color: #fff;设置颜色为fff*/
 }
        .center1_top h2{
            font-size: 80px;
 /*font-size: 80px;文字大小为80像素*/
 }
        .center1_top h2 span{
            color: #F4D03F;
 /*color: #F4D03F;文字颜色*/
 }
        .center1_top p{
            font-size: 40px;
 line-height: 50px;
 /*line-height: 50px;行高*/
 }
        .center1_bottom{
            margin: 0 auto;
 width: 70px;
 height: 70px;
 border: 2px solid rgba(255,255,255,.2);
 /*border: 2px solid rgba(255,255,255,.2);设置表格宽度和样式和颜色*/
 border-radius: 35px!important;
 /*border-radius: 35px!important;把div变成圆形*/
 font-size: 40px;
 color: #F4D03F;
 background: 0 0;
 text-align: center;
 /*text-align: center;设置文字居中*/
 }
        .center1_bottom a{
            text-decoration: none;
 /*text-decoration: none;去掉超链接的样式（下划线）*/
 color: #F4D03F;
 font-size: 70px;
 line-height: 70px;
 }
    </style>
</head>
<body>
<div class="center1">
    <div class="center1_top">
        <h2>刘翔<span>-个人简历</span></h2>
 <!--<h2>刘翔<span>-个人简历</span></h2>由于语义较大，所以选择了h2标题标签来包裹文字，span标签是为了给“个人简历”单独设置颜色-->
 <p>喜欢技术，热爱挑战</p>
        <p>职位意向：web前端开发、网站运营 期望薪资：2000+</p>
 <!--<p>p标签是段落标签</p>-->
 </div>
    <div class="center1_bottom">
        <a href="#jbxx">⇩</a>
 <!--<a href="#jbxx">⇩</a>用超链接做了一个锚点，做跳转用，点击箭头，跳转到指定锚点-->
 </div>
</div>
</body>
</html>

复制