HTML与CSS简单页面效果实例

时间：2022-09-20 22:58:05

本篇博客实现一个HTML与CSS简单页面效果实例

index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <link href="style.css" rel="stylesheet" type="text/css">

 </head>

 <body>

     <div class="container">

         <div class="wrapper">

             <div class="heading">

                <div class="heading_nav">

                    <div class="heading_title">

                                                    极客学院

                        </div>

                        <div class="heading_navbar">

                            <ul>

                                <li><a href="#">首页</a></li>

                                <li><a href="#">职业课程</a></li>

                                <li><a href="#">技术问答</a></li>

                                <li><a href="#">VIP会员</a></li>

                            </ul>

                        </div>

                        <div class="heading_img">

                            <img src="img.jpg">

                        </div>

                        <div class="heading_soptlight">

                           <form>

                              <input type="text">

                           </form>

                        </div>

                </div>

             </div>

             <div class="body">

                 <div class="body_title">

                   <h3>熟悉极客学院</h3>

                   <p>加入极客学院，学习最新实战教程，全面提升你的技术能力</p>

                 </div>

                  <hr/>

             <hr/>

             </div>

         </div>

         <div class="footing">

            @极客学院

         </div>

     </div>

 </body>

 </html>

css代码：

 *{

     margin:0px;

     padding:0px;

 }

 body{

     background-color: snow;

 }

 .wrapper{

     width:%;

     height:1000px;

     background-color: antiquewhite;

     margin:0px auto;

 }

 .heading{

     width:%;

     height:160px;

     background-color: snow;

     margin:0px auto;

 }

 ul{

     margin-left:40px;

     float:left;

     list-style-type:none;

     padding-top:40px;

     padding-bottom:6px;

 }

 a:link,a:visited{

     font-weight:bold;

     color:darkgray;

     text-align:center;

     padding:6px;

     text-decoration: none;

 }

 a:hover,a:active{

     color:blue;

 }

 .heading_title{

     float:left;

     font-family:Arial,Helvetica,sans-serif;

     font-size:30px;

     color:burlywood;

 }

 .heading_nav{

     padding-bottom:30px;

     padding-top:30px;

     width:%;

     height:30px;

     position:relative;

 }

 li{

     padding-left:10px;

     display:inline;

 }

 .heading_img img{

     border-radius:30px;

     display:inline;

     width:46px;

     height:46px;

     box-shadow: 1px 1px rgba(,,,0.2);

     float:right;

 }

 .heading_soptlight form{

     float:right;

     width:100px;

     height:26px;

     position:relative;

     margin-right:82px;

     margin-top:16px;

 }

 form input{

     height:26px;

     border-radius:30px;

 }

 .body{

     width:auto;

     height:auto;

     padding:30px;

 }

 .body_title h3{

     font-size:30px;

     font-family:Arial,Helvetical,sans-serif;

     color:#;

 }

 .body_title p{

     margin-top:20px;

     margin-bottom:20px;

 }

 .footing{

     padding-top:20px;

     text-align:center;

     fon-size:10px;

     color:darkgray;

 }

效果：

HTML与CSS简单页面效果实例

HTML与CSS简单页面效果实例的更多相关文章

  1. 3&period;8&period;1 HTML与CSS简单页面效果实例

    HTML与CSS简单页面效果实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  2. &lbrack;CSS3&rsqb; 学习笔记-HTML与CSS简单页面效果实例

    一个简单的首页的设计: html文件: <!doctype html> <html> <head> <meta charset="UTF-8&quo ...

  3. web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  4. css 实现页面加载中等待效果

    <!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta ...

  5. js&plus;html&plus;css简单的互动功能页面（2015知道几乎尖笔试题）http&colon;&sol;&sol;v&period;youku&period;com&sol;v&lowbar;show&sol;id&lowbar;XMTI0ODQ5NTAyOA&equals;&equals;&period;html&quest;from&equals;y1&period;7-1&period;2

    js+html+css实现简单页面交互功能(2015知乎前端笔试题) http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html? from=y1.7-1. ...

  6. 利用Div&plus;CSS&lpar;嵌套&plus;盒模型&rpar;布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  7. 最简单的css实现页面宽度自适应

    <div class="rxs"> <div class="rxleft"> 第一段内容,可以是任何html标签 </div&gt ...

  8. 有趣的css—简单的下雨效果2&period;0版

    简单的下雨效果2.0版 前言 笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作G ...

  9. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

随机推荐

  1. 前端必备的js知识点（转载）

    1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的.2.js是一门什么样的语言及特点?    ...

  2. css中clip-path属性的运用

    今天看到一位同学的需求,要在一个div中加一个小尖尖,对话时发的图片,旁边这个三角是怎么实现与图片的颜色一致,效果如下: 当然,解决这个问题有各种奇淫巧技,现在我们来看一个css属性clip-path ...

  3. 跟着鸟哥学Linux系列笔记0-如何解决问题

    跟着鸟哥学Linux系列笔记0-扫盲之概念 在发生问题怎么处理: 1.  在自己的主机.网络数据库上查询How-To或FAQ -Linux 自身的文件数据: /usr/share/doc -CLDP中 ...

  4. 20145220《Java程序设计》实验一实验报告

    *实验一 Java开发环境的熟悉 实验内容及步骤 使用JDK编译.运行简单的Java程序 命令行下程序开发: 在命令行下建立实验目录,进入该目录后创建exp1目录 敲入以下代码: package ex ...

  5. 关于iOS中SQLITE句柄的使用的细节

    1.设计思想:给SQLITE进行封装,利用定义的类别实现方法的简洁,以便达到低耦合效果 控制器代码: #import "ViewController.h" #import &quo ...

  6. &lbrack;TypeScript&rsqb; Generating Definition Files

    TypeScript allows you to generate definition files for your own libraries. This lesson shows you how ...

  7. Linux内核ROP学习

    0x00 前言 1.SMEP(Supervisor Mode Execution Protection):一种减缓内核利用的cpu策略,禁止内核态到用户态内存页的代码执行(32位的addresses ...

  8. 解决：Determining IP Information for eth0 一直停留 无法进入系统

    问题场景: vm centos6.4网卡之前一直没异常,可今天启动时一直卡在Determining IP Information for eth0,无法进入系统.网上说了非常多办法,大多都是不着边的说 ...

  9. zabbix3&period;4&period;7实操总结二

    一,Zabbix Web操作深入 1.1 Zabbix Web下的主机和模版以及监控项的添加方式 (1)创建一个模版 我们所有的功能几乎都是在模版中定义的 我们再点进新创建的模版查看 模版里几乎可以设 ...

  10. staticmethod&lpar;&rpar;静态方法和classmethod类方法都是装饰器

    1.staticmethod()静态方法 使用@staticmethod目的是为了增加可读性,不需要参数self(不强制要求传递参数) 的方法都可以加上@staticmethod增加可读性 静态方法无 ...

相关文章