网站开发基础:HTML、CSS

前端开发主要使用的技术如 HTML、CSS 和 JavaScript 等。

简单制作一个网页

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柒毓同学网站的首页</title>
    <style>
        .c1{border: solid 1px green;width: 49%;height: 250px;float: left}
    </style>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>




</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柒毓同学网站的首页</title>
    <style>
        .c1{border: solid 1px green;width: 49%;height: 250px;float: left}
    </style>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>

    <div style="border: solid 1px red;width: 100%;height: 300px">




</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柒毓同学网站的首页</title>
    <style>
        .c1{border: solid 1px green;width: 49%;height: 250px;float: left}
    </style>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>

    <div style="border: solid 1px red;width: 100%;height: 300px">

        <div class="c1">
            <ol>
                <li>我是第一行</li>
                <li>我是第二行</li>
                
            </ol>
        </div>
        <div class="c1" style="float: right">
            <ul>
                <li>我是第一行</li>
                <li>我是第二行</li>
                
            </ul>
        </div>

    </div>



</body>
</html>
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柒小毓网站的首页</title>
    <style>
        .c1{border: solid 1px green;width: 49%;height: 250px;float: left}
    </style>
</head>
<body>
    <h1>这是一级标题</h1>
    <h2>这是二级标题</h2>

    <div style="border: solid 1px red;width: 100%;height: 300px">

        <div class="c1">
            <ol>
                <li>我是第一行</li>
                <li>我是第二行</li>
                <li>http://www.baidu.com</li>
                <li>liujingwei@cueb.edu.cn</li>
                <li>liu.jingwei@cueb.vip</li>
                <li>liu-jingwei@teacher.cueb-2019.vip</li>
                <li>liujingwei@cueb...vip</li>
            </ol>
        </div>
        <div class="c1" style="float: right">
            <ul>
                <li>我是第一行</li>
                <li>我是第二行</li>
                <li>http://www.baidu.com</li>
                <li>liujingwei@cueb.edu.cn</li>
                <li>liu.jingwei@cueb.vip</li>
                <li>liu-jingwei@teacher.cueb-2019.vip</li>
                <li>liujingwei@cueb...vip</li>
            </ul>
        </div>

    </div>


</body>
</html>
相关推荐
孪创启航营3 分钟前
数字孪生二维热力图制作,看这篇文章就够了!
前端·three.js·cesium
宫水三叶的刷题日记6 分钟前
真的会玩,钉钉前脚辟谣高管凌晨巡查工位,小编随后深夜发文
前端·后端·面试
zzywxc78715 分钟前
AI 行业应用:金融、医疗、教育、制造业领域的落地案例与技术实现
android·前端·人工智能·chrome·金融·rxjava
Juchecar23 分钟前
Vue 3 + Naive UI 调用useMessage的方法(在Naive UI 2.42.0实测有效)
前端
前端Hardy33 分钟前
HTML&CSS:有趣的SVG路径动画效果
javascript·css
前端Hardy37 分钟前
HTML&CSS:超酷炫的3D动态卡片
前端·javascript·css
RaidenLiu1 小时前
从 Provider 迈向 Riverpod 3:核心架构与迁移指南
前端·flutter
前端进阶者1 小时前
electron-vite_18Less和Sass共用样式指定
前端
数字人直播1 小时前
稳了!青否数字人分享3大精细化AI直播搭建方案!
前端·后端
江城开朗的豌豆1 小时前
我在项目中这样处理useEffect依赖引用类型,同事直呼内行
前端·javascript·react.js