实验目的：

1、  能够对整个页面进行html结构设计。

2、  掌握CSS+DIV的应用。

实验内容及要求：

***个人博客网页

参考Internet网上的博客网站，设计自己的个人网页，主要包括：图像背景、表格布局，插入图像，flash或者影片播放，插入超级链接（至少3个），例如点击“关于我”，将链接到表单设计的网页，进行个人信息的填写。点击提交后，回到主页。

实验源代码：

myweb.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>我试试这个昵称好使不的主页</title>

    <link href="myweb.css" rel="stylesheet">

</head>

<body>

<div class="main">

    <div class="left_div">

        <p class="left_p"><img class="head" src="head.jpg"></p>

        <h1 id="name">linmob</h1>

        <p class="left_p">Is't never too old to learn.</p>

        <hr/>

        <p class="mid">

            <p>我是一个编程菜鸟，最喜欢的事是篮球、追剧和改Bug</p>

            <p>最不喜欢的事是洗碗</p>

            <p>我会不定时的上传自己的学习经验</p>

        </p>

        <hr/>

        <p class="min">欢迎来到我的个人主页！</p>

        <div class="left_p">

            <div class="button"  >

                <a class="a" href="https://www.cnblogs.com/linmob/">博客园</a>

            </div>

            <div class="button" >

                <a class="a" href="https://github.com/linmob2567">github</a>

            </div>

            <div class="button" >

                <a class="a" href="https://space.bilibili.com/554351352">b站</a>

            </div>

            <div class="button" >

                <a class="a" href=" https://user.qzone.qq.com/1483249195/main">QQ空间</a>

            </div>

        </div>

        <div class="left_p">

            <a class="di" href="setUp.html">关于我</a>

        </div>

    </div>

    <div class="right_div">

        <div class="list">

            <li>

                <h2 class="list_title">

                    <a href="https://www.cnblogs.com/linmob/p/14611695.html">

                        Python:爬取全国各省疫情数据并在地图显示

                    </a>

                </h2>

                <p>基于python语言爬取腾讯的疫情数据</p>

                <a>

                    <time>2021-03-30 14:02</time>

                    <a href="https://www.cnblogs.com/linmob/p/14611695.html">继续阅读</a>

                </a>

            </li>

            <hr class="line"/>

            <li>

                <h2 class="list_title">

                    <a href="https://www.cnblogs.com/linmob/p/14353748.html">

                        一个抽取百度定位的教程

                    </a>

                </h2>

                <p>基于百度地图demo实现软件定位功能</p>

                <a>

                    <time>2021-01-31 20:02</time>

                    <a href="https://www.cnblogs.com/linmob/p/14353748.html">继续阅读</a>

                </a>

            </li>

            <hr class="line"/>

            <li>

                <h2 class="list_title">

                    <a href="https://www.cnblogs.com/linmob/p/12739190.html">

                        学习JAVA语言的第一步

                    </a>

                </h2>

                <p>安装好JAVA开发环境并且在Eclipse上面运行HelloWorld程序</p>

                <a>

                    <time>2020-04-20 17:29</time>

                    <a href="https://www.cnblogs.com/linmob/p/12739190.html">继续阅读</a>

                </a>

            </li>

        </div>

    </div>

</div>

</body>

</html>

myweb.css

div{

    top:0;

    float: left;

}

li{

    margin-top: 50px;

    margin-bottom: 50px;

    margin-left:10%;

    width: 100%;

    list-style: none;

}

*{

    margin: 0;

    padding: 0;

}

p{

    margin-top: 10px;

    margin-bottom: 10px;

}

a{

    color: white;

}

.line{

    margin-left: 10%;

    width: 220px;

}

.main{

    width:100%;

    height:100%;

    position: absolute;

    background: lavenderblush;

}

.left_div{

    background: #474b60;

    width:30%;

    height:100%;

    font-size: 20px;

    color: white;

    text-align:center;

}

.right_div{

    background: url("girl.jpg") no-repeat;

    background-size: cover;

    width:70%;

    height:100%;

}

.head{

    border-radius:50%;

    width:100px;

    height:100px;

}

.list{

    width:100%;

    height:100%;

    background-color:rgba(71,75,96,0.6);// -->70%的不透明度

}

.button{

    border-style: solid;

    border-color: white;

    text-decoration:none;

    border-radius: 30px;

    margin-top: 20px;

    margin-left: 20px;

    margin-right: 20px;

    text-align:center;

}

.a{

    margin-left: 20px;

    margin-right: 20px;

    text-decoration:none;

}

.mid{

    margin-left: 50px;

    margin-right: 50px;

    font-size: 20px;

}

.min{

    margin-left: 50px;

    margin-right: 50px;

    font-size: 16px;

}

hr{

    margin-bottom: 40px;

    margin-top: 40px;

}

.left_p{

    margin-top: 50px;

    width: 100%;

    text-align: center;

}

.di{

    margin-top: 100px;

    font-size: 10px;

    width: 100%;

    text-align: center;

}

setup.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>个人信息设置</title>

    <link href="setup.css" rel="stylesheet">

</head>

<body>

<div>

    <form action="myweb.html" method="post">

        头像：<input type="file" id="head" required class="put"><br>

        昵称：<input type="text" id="name" class="put"><br>

        签名：<input type="text" id="note" class="put"><br>

        介绍：<input type="text" id="jieshao" class="put"><br>

        邮箱：<input type="text" id="mail" class="put"><br>

        <input type="submit" value="提交" class="button">

        <button type="reset" class="button">重置</button>

    </form>

</div>

</body>

</html>

setup.css

div {

     font-size: 15px;

     font-family: 华文行楷;

    margin-top: 200px;

    color: white;

    background: rgba(71,75,96,0.6);

}

a:hover {

    font-size: 40px;

}

a:link {

    color:#6495ED;

}

a:visited {

    color: #6495ED;

}

form {

    clear: both;

    font-family: 华文行楷;

    font-size: 30px;

    margin-left: 43%;

}

#nav{

    position:relative;

    width:100%;

    height:80px;

    text-align:center;

    overflow:hidden

}

#nav .nav-skin{

    float:left;

    position:relative;

    left:50%;

}

#nav .nav-skin li{

    font-size: 20px;

    position:relative;

    right:50%;

    float:left;

    margin:10px;

    padding:0 10px;

    line-height:60px;

}

.button {

    margin-top: 30px;

    width: 100px;

    padding:8px;

    background-color: #428bca;

    border-color: #357ebd;

    color: #fff;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    border-radius: 10px; /* future proofing */

    -khtml-border-radius: 10px; /* for old Konqueror browsers */

    text-align: center;

    vertical-align: middle;

    border: 1px solid transparent;

    margin-left: 30px;

    margin-bottom: 30px;

    font-size:75%

}

.put{

    margin-top: 20px;

    border: 1px solid #ccc;

    padding: 7px 0px;

    border-radius: 3px; /*css3属性IE不支持*/

    padding-left:5px;

    width: 200px;

    height: 30px;

    background: rgba(71,75,96,0.6);;

}

body {

    background-repeat: no-repeat;

    background-size:cover;

    background-attachment: fixed;

    background-image: url(girl.jpg);

}

php 实验一 网页设计的更多相关文章

  1. （转）自适应网页设计（或称为响应式web设计）（Responsive Web Design）

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  2. 网页设计（CSS&JS）

    实验一  简单静态网页设计 一. 实验目的: 复习使用记事本编辑网页的方法. 熟悉不同表单控件类型的应用. 练习使用记事本在网页中添加表单与表单元素. 二. 实验内容: 根据提供的素材设计在线调查问卷 ...

  3. 网页设计与开发——HTML、CSS、JavaScript (王津涛) pdf扫描版

    网页设计与开发——html.css.javascript从网页制作实际出发,除了详细地介绍html页面制作.css样式控制和javascript动态程序之外,还介绍了html 5.全书共分15章,各章 ...

  4. 网页设计与开发：HTML、CSS、JavaScript实例教程 (郑娅峰) pdf扫描版

    网页设计与开发:HTML.CSS.JavaScript实例教程从实用角度出发,详细讲解了HTML.CSS和JavaScript的基本语法和设计技巧,通过一个实用的班级网站的规划.设计.实现到发布过程, ...

  5. Httpster –世界各地最潮的网页设计案例聚合网站

    Httpster 这个网站聚合了世界各地最新最潮的网页设计案例,展示了创意的设计,精心的策划,优秀的排版.这些作品都按月份和类别进行了很好划分,你可以方便的找到自己感兴趣的网站案例. 立即去看看 您可 ...

  6. 20145215&20145307《信息安全系统设计基础》实验二 固件设计

    20145215&20145307<信息安全系统设计基础>实验二 固件设计 实验目的与要求 了解多线程程序设计的基本原理,学习 pthread 库函数的使用. 了解在 linux ...

  7. 自适应网页设计（Responsive Web Design）

    引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...

  8. 20145218&20145240 《信息安全系统设计基础》实验二 固件设计

    20145218&20145240 <信息安全系统设计基础>实验二 固件设计 实验报告链接:http://www.cnblogs.com/20145240lsj/p/6035512 ...

  9. 手机web——自适应网页设计（html/css控制）

    一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...

随机推荐

  1. Lua中如何实现类似gdb的断点调试--03通用变量修改及调用栈回溯

    在前面两篇01最小实现及02通用变量打印中,我们已经实现了设置断点.删除断点及通用变量打印接口. 本篇将继续新增两个辅助的调试接口:调用栈回溯打印接口.通用变量设置接口.前者打印调用栈的回溯信息,后者 ...

  2. 对element-ui的table组件的二次封装

    首先,使用过element-ui的table组建的同学都知道,每次使用的时候表头字段都要一个一个的去写,写起来很麻烦,既不美观又浪费时间,基于以上原因,对table组件进行二次封装,使我们在使用的时候 ...

  3. Maven插件mybatis-generator，如何让生成的PO类的field上有对应表字段的注释

    前言 去年刚入职的时候,我就发现,po类(和数据库表对应的类)上,一片都是光秃秃的,什么注释都没有,类上没注释,field上也没注释. 在以前的项目中,其实我们都是有生成注释的,比如,对于下面这个表: ...

  4. BUU [GKCTF 2021]签到

    BUU [GKCTF 2021]签到 1.题目概述 2.解题过程 追踪HTTP流 在下面发现了一串可疑字符 Base16转base64 放到010里看看 复制下来,去转字符 好像不是,再回去找找其他的 ...

  5. Android 12(S) 图形显示系统 - BufferQueue的工作流程（十）

    题外话 疫情隔离在家,周末还在努力学习的我  ..... 一.前言 上一篇文章中,有基本讲清楚Producer一端的处理逻辑,最后也留下了一个疑问: Consumer是什么时候来消费数据的?他是自己主 ...

  6. bzoj2007/luoguP2046 海拔(平面图最小割转对偶图最短路)

    bzoj2007/luoguP2046 海拔(平面图最小割转对偶图最短路) 题目描述: bzoj  luogu 题解时间: 首先考虑海拔待定点的$h$都应该是多少 很明显它们都是$0$或$1$,并且所 ...

  7. JS的Event各种属性级target/currentTarget/relatedTarget各种目录的解释

    1.Event属性解释:https://developer.mozilla.org/zh-CN/docs/Web/API/Event 2.Event.target/currentTarget/rela ...

  8. 什么是线程组，为什么在 Java 中不推荐使用？

    ThreadGroup 类,可以把线程归属到某一个线程组中,线程组中可以有线程对象, 也可以有线程组,组中还可以有线程,这样的组织结构有点类似于树的形式. 为什么不推荐使用?因为使用有很多的安全隐患吧 ...

  9. springboot常用的starter有哪些?

    spring-boot-starter-web 嵌入tomcat和web开发需要servlet与jsp支持 spring-boot-starter-data-jpa 数据库支持 spring-boot ...

  10. mac phpstorm返回文件顶部或者底部

    在Mac下,请按FN+Command+→|←,就这么简单~