学生网页设计实践作业 简单足球静态HTML网页作品 足球网页作业成品 学生体育运动足球网站模板

一、作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

---

二、作品效果

▶️视频演示

https://live.csdn.net/v/embed/240067

(title-K11SJ-足球明星C罗三级表单（8页）)]

截图演示

07.png

06.png

05.png

04.png

03.png

02.png

01.png

---

三、 作品代码

HTML代码

 





首页
C罗简介
C罗相册
职业生涯
C罗新闻
贵宾留言






     
                  








C罗简介


  克里斯蒂亚诺·罗纳尔多，简称C罗，1985年2月5日出生于葡萄牙马德拉岛丰沙尔，职业足球运动员，司职边锋可兼任中锋。现效力于意甲尤文图斯足球俱乐部，并身兼葡萄牙国家队队长。C罗带球速度极快，善于突破和射门，拥有强悍的身体素质，技术非常全面。2019年1月4日，获得环球足球奖最佳球员奖项；6月9日，随队1-0战胜荷兰获得首届欧国联冠军，并获得决赛阶段金靴。



C罗新闻                                更多>>






职业生涯




  C罗出身于葡萄牙著名球队里斯本竞技。2003-04年赛季曼联官方宣布以1，224万英镑转会费买入C罗，取代转会皇家马德里的贝克汉姆成为"7"号球衣的新主人。

  加入曼联后，C罗主要担任右翼的角色，但也不时参与左路的进攻。他用华丽的脚法及优秀盘带能力，使球迷对他眼前一亮。

  2009年6月26日，皇家马德里官方确认克里斯蒂亚诺·罗纳尔多将于7月1日以8，000万英镑转会费加盟皇马，年薪高达1，200万欧元。
  2018年8月19日，在尤文图斯迎战切沃的比赛中，C罗上演意甲首秀.





C罗风采


    
图一
            
图二
            
图三
            
图四
            
图五
   







2020-2021@ 版权所有 球星C罗 

CSS代码

body {
    margin: 0 auto;
    font-size: 12px;
    font-family: "宋体",arial;
    line-height: 22px;
}

div,p,input,ul,li,h1,h2,h3,h4,h5,h6,dl,dt,dd {
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

li {
    list-style: none;
}

img {
    border: 0;
    margin: 0;
    padding: 0;
}



.ms ul li img {
    width: 185px;
    height: 150px;
}

.ms ul li p {
    text-align: center;
    font-size: 14px;
}

.bottom {
    width: 1000px;
    margin: 0 auto;
    margin-top: 20px;
}

.bottom p {
    width: 100%;
    height: 30px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
}

.righttitle {
    width: 935px;
    background: url(../images/er_02.png) no-repeat;
    height: 68px;
    line-height: 68px;
    padding-left: 65px;
    color: #3e8100;
    font-size: 18px;
    font-weight: bold;
}

.righttitle span {
    font-size: 14px;
    color: #a5a5a5;
    font-family: "arial";
    font-weight: normal;
}

.neirong {
    padding: 0px 15px 15px 15px;
}

.neirong img {
    margin: 0 auto;
    display: block;
}

.ncontu {
    padding-bottom: 0px;
    line-height: 22px;
    padding-left: 7px;
    width: 100%;
    padding-right: 0px;
    float: left;
    color: #464646;
}

.ncontu ul {
}

.ncontu ul li {
    width: 250px;
    display: block;
    float: left;
    height: 220px;
    overflow: hidden;
    margin-bottom: 15px;
}

.danye {
    color: #666;
    font-size: 14px;
    line-height: 25px;
}

.danye b {
    font-size: 18px;
    display: block;
    text-align: center;
}

.danye img {
    margin: 0 auto;
    display: block;
}

.news {
    width: 100%;
}

.news ul li {
    line-height: 30px;
    height: 30px;
    background: url(../images/fenge.jpg) bottom repeat-x;
    color: #3d2915;
}

.news ul li a {
    float: left;
    display: block;
    line-height: 30px;
    height: 30px;
    background: url(../images/lvdian.jpg) left center no-repeat;
    color: #3d2915;
    padding-left: 20px;
}

.news ul li a:hover {
    color: #000;
}

.news ul li span {
    float: right;
    color: #666;
    line-height: 30px;
}

.biaoti {
    color: #3d2915;
    font-weight: bold;
    font-size: 16px;
    line-height: 40px;
    background: url(../images/fenge.jpg) bottom repeat-x;
    text-align: center;
    margin-bottom: 10px;
    _margin-bottom: 10px;
}

.inpt {
    border: 1px #bbb solid;
    width: 550px;
    height: 20px;
}

.tare {
    border: 1px #bbb solid;
    width: 550px;
    height: 200px;
}

.btn {
    width: 60px;
    height: 25px;
    border: 1px #bbb solid;
    background: #fff;
}

---

四、更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app