zoukankan      html  css  js  c++  java

  • 斯坦福大学首页制作

           昨天休息，鉴于刚学完布局，老师叫我们做斯坦福官网首页，说要做框架出来，然后尽量能完善的完善，鉴于我做东西一发不可收拾的结果，我除了框架还把内弄填进去了，当然，每个信息的超链接是没弄上去的了，因为时间不太够了，所以我把代码成果写入博客留作第一次做网页的纪念吧，由于第一次做网页，期间走了不少的弯路。

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>斯坦福首页</title>
    <link type="text/css" rel="stylesheet" href="css/css2.css" />
    <style>
    * {
    margin:0px;
    padding:0px;
    }
    #top {
    100%;
    height: 100px;
    /*border: 1px solid black;*/
    background-color: darkred;
    }
    .top-left,.top-right {
    40%;
    height:100px;
    /*border:2px solid black;*/
    float:left;

    text-align:center;
    line-height:100px;
    font-size:30px;
    color:white;


    }
    .top-right {
    40%;
    float:right;
    /*background-color:yellow;*/
    height:100px;
    text-align:center;
    line-height:100px;
    /*border:1px solid black;*/
    font-size:16px;
    }
    .top2 {
    100%;
    height:50px;
    float:right;
    /*border:1px solid black;*/
    background-color:whitesmoke;

    }
    .ct3 {
    650px;
    height:50px;
    /*border:1px solid black;*/
    float:left;
    margin:0px 0px 0px 95px;
    font-size:18px;
    line-height:50px;
    }
    .ct4 {
    400px;
    height:50px;
    /*border:1px solid red;*/
    float:left;
    margin:0px 0px 0px 160px;
    font-size:13px;
    line-height:50px;

    }
    .center-out {
    100%;
    height:1400px;
    /*border:1px solid black;*/
    margin-top:70px;

    }
    .center1 {
    1160px;
    height:430px;
    /*border:1px solid black*/
    margin:0px auto;
    background-image:url(img/113.jpg);


    }
    .center1-1 {
    600px;
    height:100px;
    margin:20px 0px 0px 15px;
    border:1px solid black;
    background-color:whitesmoke;
    opacity:0.8;



    }
    .center1-1-1 {
    600px;
    height:100px;
    margin:20px 0px 0px 20px;
    /*border:1px solid black;*/

    }
    .span {
    color:red;
    font-size:x-large;
    }
    .center2 {
    1160px;
    height:70px;
    border-bottom:1px solid grey;
    /*border:1px solid black;*/
    margin:0px auto;
    font-size:20px;
    vertical-align:bottom;
    line-height:120px;
    }
    .center3 {
    1160px;
    height:340px;
    /*border:1px solid black;*/
    margin:0px auto;

    }
    .c3-1 {
    260px;
    margin:20px 20px 0px 0px;
    height:160px;
    /*border:1px solid red;*/
    float: left;
    background-image:url(img/s1.jpg);
    background-repeat:no-repeat;


    }
    .c3-2 {
    260px;
    margin:20px 20px 0px 0px;
    height:160px;
    /*border:1px solid red;*/
    float: left;
    background-repeat:no-repeat;
    background-image:url(img/s2.jpg);

    }
    .c3-3 {
    260px;
    margin:20px 20px 0px 0px;
    height:160px;
    /*border:1px solid red;*/
    float: left;
    background-repeat:no-repeat;
    background-image:url(img/s3.jpg);
    }
    .c4 {
    290px;
    margin:20px 20px 0px 0px;
    height:160px;
    /*border:1px solid red;*/
    float:left;
    list-style-position:inside;



    }
    .c5 {
    260px;
    margin:20px 20px 0px 0px;
    height:138px;
    /*border:1px solid red;*/
    float:left;

    }
    .c6 {
    260px;
    margin:20px 20px 0px 0px;
    height:138px;
    /*border:1px solid red;*/
    float:left;

    }
    .c7 {
    260px;
    margin:20px 20px 0px 0px;
    height:138px;
    /*border:1px solid red;*/
    float:left;

    }
    .c8 {
    260px;
    margin:20px 20px 0px 0px;
    height:138px;
    /*border:1px solid red;*/
    float:left;
    line-height:120px;

    }
    .center4 {
    1160px;
    height:70px;
    /*border:1px solid black;*/
    margin:0px auto;
    }
    .center4-1 {
    830px;
    height:70px;
    /*border:1px solid black;*/
    background-color:antiquewhite;
    float:left;
    }
    .c41 {
    100px;
    height:70px;
    /*border:1px solid black;*/
    float:left;
    text-align:center;
    vertical-align:middle;
    line-height:30px;
    }
    .c42 {
    120px;
    height:70px;
    /*border:1px solid black;*/
    float:left;
    text-align:center;
    line-height:70px
    }
    .c43 {
    590px;
    height:70px;
    /*border:1px solid black;*/
    float:left;

    }
    .c44{
    130px;
    height:70px;
    /*border:1px solid black;*/
    float:left;
    }
    .center4-2 {
    300px;
    height:70px;
    /*border:1px solid black;*/
    float:left;
    background-image:url(img/pingguo.png);
    }
    .center5 {
    1160px;
    height:70px;
    /*border:1px solid black;*/
    margin:0px auto;
    }
    .c51 {
    400px;
    height:70px;
    /*border:1px solid black;*/
    margin:0px 10px 0px 0px;
    float:left;
    border-bottom:1px solid grey;
    font-size:20px;
    vertical-align:bottom;
    line-height:120px;
    }
    .c52 {
    400px;
    height:70px;
    /*border:1px solid black;*/
    margin:0px 10px 0px 0px;
    float:left;
    border-bottom:1px solid grey;
    font-size:20px;
    vertical-align:bottom;
    line-height:120px;
    }
    .c53 {
    320px;
    height:70px;
    /*border:1px solid black;*/
    margin:0px 10px 0px 0px;
    float:left;
    border-bottom:1px solid grey;
    font-size:20px;
    vertical-align:bottom;
    line-height:120px;
    }

    .center6 {
    1160px;
    height:360px;
    /*border:1px solid black;*/
    margin:0px auto;
    }
    .c61 {
    400px;
    height:360px;
    /*border:1px solid black;*/
    margin:0px 10px 0px 0px;
    float:left;
    line-height:600px;
    }
    .c62 {
    400px;
    height:360px;
    /*border:1px solid black;*/
    margin:0px 10px 0px 0px;
    float:left;
    list-style-position:inside;
    line-height:40px;

    }
    .c63 {
    320px;
    height:360px;
    /*border:1px solid black;*/
    margin:0px 10px 0px 0px;
    float:left;
    }
    .c631 {
    100px;
    height:360px;
    /*border:1px solid black;*/
    float:left;
    margin:0px 40px 0px 0px;
    background-image:url(img/shu.png);
    background-repeat:no-repeat;

    }
    .c632 {
    160px;
    height:360px;
    /*border:1px solid black;*/
    float:left;
    margin:0px 10px 0px 0px;
    line-height:30px;
    }

    .down1 {
    100%;
    height:300px;
    /*border:1px solid black;*/
    background-color:whitesmoke;
    }
    .cd1 {
    140px;
    height:250px;
    /*border:1px solid red;*/
    margin:40px 0px 0px 90px;
    float:left;
    }
    .cd2 {
    140px;
    height:250px;
    /*border:1px solid red;*/
    margin:40px 0px 0px 60px;
    float:left;
    }
    .cd3 {
    140px;
    height:250px;
    /*border:1px solid red;*/
    margin:40px 0px 0px 60px;
    float:left;
    }
    .cd4 {
    140px;
    height:250px;
    /*border:1px solid red;*/
    margin:40px 0px 0px 60px;
    float:left;
    }
    .cd5 {
    140px;
    height:250px;
    /*border:1px solid red;*/
    margin:40px 0px 0px 60px;
    float:left;
    }
    .cd6 {
    140px;
    height:250px;
    /*border:1px solid red;*/
    margin:40px 0px 0px 60px;
    float:left;
    }
    .btn {
    100px;
    height:40px;
    border:black solid 1px;
    text-align:center;
    line-height:40px;
    background-color:grey;
    }
    .btn:hover {
    background-color:black;
    color:white;
    cursor:pointer;



    }
    .btn2 {
    100px;
    height:40px;
    border:black solid 1px;
    text-align:center;
    line-height:40px;
    background-color:grey;
    }
    .btn2:hover {
    background-color:black;
    color:white;
    cursor:pointer;



    }
    .btn3 {
    100px;
    height:40px;
    border:black solid 1px;
    text-align:center;
    line-height:40px;
    background-color:grey;
    }
    .btn3:hover {
    background-color:black;
    color:white;
    cursor:pointer;



    }
    .btn4 {
    100px;
    height:40px;
    border:black solid 1px;
    text-align:center;
    line-height:40px;
    background-color:grey;
    }
    .btn4:hover {
    background-color:black;
    color:white;
    cursor:pointer;



    }
    .btn5 {
    100px;
    height:40px;
    border:black solid 1px;
    text-align:center;
    line-height:40px;
    background-color:grey;
    }
    .btn5:hover {
    background-color:black;
    color:white;
    cursor:pointer;



    }


    .down2 {
    100%;
    height: 100px;
    /*border: 1px solid black;*/
    background-image:url(img/down.png);
    }


    </style>
    </head>
    <body>
    <div id="top">
    <div class="top-left">Stanford University</div>
    <div class="top-right">
    <label for="nan">Web</label><input type="radio" name="4" value="q" id="nan" />
    &nbsp&nbsp<label for="nv">People</label><input type="radio" name="4" value="q" id="nv" />
    &nbsp&nbsp<input type="text" placeholder="Search web or people" name="1" />
    </div>
    </div>
    <div class="top2">
    <div class="ct3">
    About Stanford
    &nbsp&nbsp&nbsp&nbsp&nbspAdmission
    &nbsp&nbsp&nbsp&nbsp&nbspAcademics
    &nbsp&nbsp&nbsp&nbsp&nbsp Research
    &nbsp&nbsp&nbsp&nbsp&nbspCampus Life
    </div>
    <div class="ct4">
    STUDENTS
    &nbsp&nbsp&nbsp&nbspFACULTY / STAFF
    &nbsp&nbsp&nbsp&nbspPARENTS
    &nbsp&nbsp&nbsp&nbspALUMNI
    </div>
    </div>
    <div class="center-out">
    <div class="center1">
    <div class="center1-1">
    <div class="center1-1-1">
    <div class="span">
    <span>Iran,past and preset</span>

    </div>
    <p>Ten-year-old Stanford program explores depth and breadth of</p>
    <p>unique nation politics,history,language and culture.</p>
    </div>
    </div>
    </div>
    <div class="center2">Top Stories</div>
    <div class="center3">
    <div class="c3-1"></div>
    <div class="c3-2"></div>
    <div class="c3-3"></div>
    <div class="c4">
    <p>MORE HEADLINES</p>
    <ul type="square">
    <li>Scientists crowdsource autism data to learn where resource gaps exist</li>
    <li>Study finds first possible drug treatment for lymphedema</li>
    <li>Report details universities' efforts on sexual assault</li>
    </ul>
    </div>
    <div class="c5">
    <p>Optimal dosing</p>
    <p>Stanford engineers create experimental </p>
    <p>technology to monitor and maintain drug </p>
    <p>levels in the body.</p>
    </div>
    <div class="c6">
    <p>Experts on demand</p>
    <p>Stanford researchers develop crowdsourcing </p>
    <p>software to convene rapid, on-demand flash </p>
    <p>organizations.</p>
    </div>
    <div class="c7">
    <p>Real-life scenarios</p>
    <p>'Humbling' hospital simulations inspire </p>
    <p>Stanford graduate students to solve </p>
    <p>problems in health care delivery.</p>
    </div>
    <div class="c8"> MORE NEWS</div>
    </div>
    <div class="center4">
    <div class="center4-1">
    <div class="c41">
    <p>11 MIN.</p>
    <p>AGO</p>
    </div>
    <div class="c42"> @Stanford</div>
    <div class="c43">
    <p>
    .@StanfordMed's Caitlin O' Connell-Rodwell has shown the potential for elephant-
    </p>
    <p>
    inspired vibrational hearing aids. stanford.io/2q3nFDS
    </p>
    </div>

    </div>
    <div class="center4-2"></div>
    </div>
    <div class="center5">
    <div class="c51">At Stanford</div>
    <div class="c52">Events</div>
    <div class="c53">Athletics</div>
    </div>
    <div class="center6">
    <div class="c61"> MORE SITES</div>
    <div class="c62">
    <ul type="square">
    <li>
    Bike to Work Day at Stanford

    </li>
    <li>
    Creativity on the Line: Design for the Corporate World, 1950–1975
    </li>

    <li>

    2017 Oksenberg Lecture - Ambassador Max Baucus3:00 PM

    </li>
    <li>
    Stanford Medicine Dean's Lecture Series: Thomas Pike5:00 PM
    </li>
    <li>
    EVENT CALENDAR
    </li>
    </ul>
    </div>
    <div class="c63">
    <div class="c631"></div>
    <div class="c632">
    <p>Leading the way</p>
    <p>
    Stanford was well represented with 14 athletic programs earning perfect 1,000 multi-year scores in the Academic Progress Rate statistics issued by the NCAA.


    </p>
    <p> GOSTANFORD.COM</p>
    </div>
    </div>
    </div>
    </div>
    <div class="down1">
    <div class="cd1">
    <p>SCHOOLS</p>
    <p>
    Business
    Earth, Energy & Environmental Sciences
    Education
    Engineering
    Humanities & Sciences
    Law
    Medicine
    </p>
    </div>
    <div class="cd2">
    <p>DEPARTMENTS</p>
    <p>
    Departments A - Z
    Interdisciplinary Programs<br /><br /><br />
    RESEARCH
    Research Centers A - Z
    Interdisciplinary Research
    Libraries
    </p>
    </div>
    <div class="cd3">
    <p>HEALTH CARE</p>
    <p>
    Stanford Health Care
    Stanford Children's Health<br /><br /><br />
    ONLINE LEARNING
    Stanford Online
    </p>
    </div>
    <div class="cd4">
    <p>ABOUT STANFORD</p>
    <p>
    Facts
    History
    Accreditation<br /><br /><br />
    ADMISSION
    Undergraduate
    Graduate
    Financial Aid


    </p>
    </div>
    <div class="cd5">
    <p>RESOURCES</p>
    <p>
    A - Z Index
    Campus Map
    Directory
    Stanford Profiles
    </p>
    </div>
    <div class="cd6">
    <div class="btn">Apple</div>
    <div class="btn2">Visit Campus</div>
    <div class="btn3">Make a Gift</div>
    <div class="btn4">Find a Job</div>
    <div class="btn5">Contact Us</div>

    </div>

    </div>
    <div class="down2"></div>
    </body>
    </html>
  • 相关阅读:
    JSP基础学习（二）
    JSP基础学习（一）
    Android 使用开源xUtils来实现多线程下载（非原创）
    Android 多线程断点下载（非原创）
    Android HttpClient框架get和post方式提交数据（非原创）
    Android ListView使用（非原创）
    ScrollView 的使用（非原创）
    Android SQLite API的使用（非原创）
    Android SQLite的使用2（非原创）
    位运算
  • 原文地址：https://www.cnblogs.com/yujiamin123/p/6847098.html
Copyright © 2011-2022 走看看