HTML与CSS回顾

Html基础

https://blog.csdn.net/zhouhe_/article/details/114926609

CSS基础

https://blog.csdn.net/zhouhe_/article/details/115250336

人物简介demo
  • HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>人物简介</title>
        <link rel="stylesheet" href="description.css">
    </head>
    <body>
    
    <!--人物简介-->
    <div class="container">
        <!--  顶部title  -->
        <div class="title">
            <h1>人物简介---吴彦祖</h1>
        </div>
        <!--  导航栏  -->
        <div class="nav">
            <a href="#basic-info">基本信息</a>
    
            <a href="#basic-actor">演艺经历</a>
            <a href="#basic-record">获奖记录</a>
            <a href="#basic-social">社会活动</a>
            <a href="#basic-solaiton">联系方式</a>
        </div>
        <!--  媒体信息  -->
        <div class="media">
            <img src="https://img2.baidu.com/it/u=3336483108,1689993972&fm=26&fmt=auto&gp=0.jpg" alt="">
            <img src="https://img1.baidu.com/it/u=2015534170,964260099&fm=26&fmt=auto&gp=0.jpg" alt="">
        </div>
        <!--  基本信息  -->
        <div class="basic" id="basic-info">
            <h2>基本信息</h2>
            <p>
                吴彦祖(Daniel Wu),1974年9月30日出生于美国旧金山,华语影视男演员、导演、制片人,毕业于美国俄勒冈大学。1998年,因出演个人首部电影作品《美少年之恋》进入演艺圈;同年,凭借文艺片《玻璃之城》提名第18届香港电影金像奖最佳新演员。2001年,主演文艺片《游园惊梦》。2003年,首次担任监制并主演了惊悚片《妖夜回廊》,凭该片首次提名第40届台湾电影金马奖最佳男主角。2004年,因出演 .
            </p>
        </div>
        <div class="basic"id="basic-actor">
            <h2>演艺经历</h2>
    
            <table border="1">
                <tr>
                    <th>时期</th>
                    <th>经历</th>
                </tr>
                <tr>
                    <td>2011年3月</td>
                    <td>吴彦祖与冯德伦合作创立了突围映画电影制作公司</td>
                </tr>
                <tr>
                    <td>2012年5月4日</td>
                    <td>由伍仕贤执导的剧情片《形影不离》上映</td>
                </tr>
                <tr>
                    <td>2013年11月22日</td>
                    <td>吴彦祖担任监制并主演的犯罪动作片《控制》上映</td>
                </tr>
                <tr>
                    <td>2014年4月18日</td>
                    <td>与张家辉领衔主演的悬疑犯罪片《魔警》上映</td>
                </tr>
                <tr>
                    <td>2015年8月13日</td>
                    <td>搭档白百何主演的励志喜剧片《滚蛋吧!肿瘤君》上映</td>
                </tr>
            </table>
        </div>
        <div class="basic" id="basic-record">
            <h2>获奖记录</h2>
            <table border="1">
                <tr>
                    <th>时间</th>
                    <th>获奖</th>
                </tr>
                <tr>
                    <td> 2018-1-6</td>
                    <td>英国皇家建筑师学会奖</td>
                </tr>
                <tr>
                    <td> 2015-02  </td>
                    <td>第34届香港电影金像奖最佳男主角奖</td>
                </tr>
                <tr>
                    <td> 2007-04</td>
                    <td>第26届香港电影金像奖新晋导演奖</td>
                </tr>
                <tr>
                    <td>2005-04 </td>
                    <td> 第18届香港电影金像奖最佳新演员奖</td>
                </tr>
                <tr>
                    <td>2005-04</td>
                    <td>第24届香港电影金像奖最佳男配角奖</td>
                </tr>
            </table>
        </div>
        <div class="basic" id="basic-social">
            <h2>社会活动</h2>
            <p>
                2006年底,在中国香港“SuperStars”影展及摄影集慈善义卖活动上,余文乐、吴彦祖、郭富城等300多位明星为慈善活动所拍摄的裸照曝光 [68]  。
            </p>
            <br>
            <p>
                吴彦祖(Daniel Wu),1974年9月30日出生于美国旧金山,华语影视男演员、导演、制片人,毕业于美国俄勒冈大学。1998年,因出演个人首部电影作品《美少年之恋》进入演艺圈;同年,凭借文艺片《玻璃之城》提名第18届香港电影金像奖最佳新演员。2001年,主演文艺片《游园惊梦》。2003年,首次担任监制并主演了惊悚片《妖夜回廊》,凭该片首次提名第40届台湾电影金马奖最佳男主角。2004年,因出演 .
            </p>
            <br>
            <p>
                2009年2月,吴彦祖为四川地震灾区彭州小鱼洞的群众修建永久性房屋;5月10日,吴彦祖参加了“壹家人壹起走——纪念5.12汶川行”活动 [70]  ;7月6日,吴彦祖向四川地震灾区出资捐建5间房屋,并且表示每年都会抽出几次时间去四川探访 [71-72]  ;9月20日,吴彦祖携手吴君如在香港出席了“仁人家园义工周”的公益活动 [73]
            </p>
            <br>
            <p>
                2013年11月1日,“2014爱·家庭慈善月历”在香港推出,包括吴彦祖等在内的12个明星家庭齐心推动此公益活动 [74]  。        </p>
        </div>
        <div class="bottom-basic" id="basic-solaiton">
            <h2>联系方式</h2>
            <span class="solation">请将你想告诉我的话发送至我的邮箱</span>
            <textarea name="吴彦祖" id="1" cols="30" rows="10"></textarea>
            <button>提交</button>
    
        </div>
        <a href="#" id="return-top">返回顶部</a>
        <div class="rightCopy">
            ©2021 Baidu 使用百度前必读 | 百科协议 | 隐私政策 | 百度百科合作平台 | 京ICP证030173号
        </div>
    
    
    
    
    </div>
    
    </body>
    </html>
    
  • CSS

    *{
        margin: 0;
        padding: 0;
    }
    .container{
        margin: 0 15%;
        background: #d1d4d2f5;
    }
    .title{
        background: dodgerblue;
        color: #333;
        height: 70px;
    }
    .title h1{
        margin-left: 60px;
        line-height: 70px;
        color: white;
    }
    .nav{
        width: 500px;
        display: flex;
        flex-direction: row;
        margin: 20px auto;
    
    }
    .nav a{
        width: 100px;
        height: 25px;
        border: 1px solid dodgerblue ;
        background: dodgerblue;
        text-decoration: none;
        border-radius: 0 20%;
        color: white;
        font-weight: lighter;
        text-align: center;
    }
    .nav a:hover{
        text-decoration: underline;
    }
    .nav a+a{
        margin-left: 8px;
    }
    .media{
        display: flex;
        margin: 15px 10%;
    }
    .media img{
        width: 200px;
    
    }
    .media img:first-child{
        margin-right: 60px;
    }
    .media img:last-child{
        flex: 1;
    }
    
    
    .basic{
        margin: 15px 9%;
    }
    .basic h2{
        margin-bottom: 10px;
    }
    .basic p{
        text-indent: 2em;
        text-align: justify;
    }
    
    .basic table{
        border-collapse: collapse;
        border-color: black;
    }
    .bottom-basic{
        margin: 15px 9%;
    
        display: flex;
        flex-direction: column;
    }
    .bottom-basic .solation{
        margin:  15px 50px;
    }
    .bottom-basic textarea{
        border: 1px solid cadetblue;
        outline: none;
    }
    .bottom-basic button{
        width: 50px;
    
    }
    #return-top{
        display: block;
        color: purple;
        text-decoration: none;
        width: 80px;
        margin: 0 auto;
    
    }
    .rightCopy{
        height: 70px;
        line-height: 70px;
    
        color: white;
        background: dodgerblue;
        text-align: center;
    }
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值