HTML与CSS回顾

最新推荐文章于 2025-07-21 18:42:00 发布

原创最新推荐文章于 2025-07-21 18:42:00 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

java 专栏收录该内容

108 篇文章

订阅专栏

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;
}