html+css+js制作简单网站首页

最新推荐文章于 2024-05-25 11:43:58 发布
最新推荐文章于 2024-05-25 11:43:58 发布
阅读量2.5w 收藏 515
点赞数 66
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44752434/article/details/107633979
版权

一个简单的网站主页

主要由html+css+js制作

1.图片展示

在这里插入图片描述
这是首页的上半部分，主要内容有：顶部标头、顶部导航栏、图片轮播图。

在这里插入图片描述这是首页的下半部分，主要内容有：首页主要内容、底部。

2.代码展示

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我们的恋爱小屋</title>
    <embed src="images/1.mp3" hidden="true" autostart="true" loop="true"/>
    <audio src="images/1.mp3" hidden="true" autostart="true" loop="true"></audio>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript">
        window.onload=function(){
        var wrap=document.getElementById('wrap'),
        pic=document.getElementById('pic').getElementsByTagName("li"),
        list=document.getElementById('list').getElementsByTagName('li'),
        index=0,
        timer=null;
       
        // 定义并调用自动播放函数
        timer = setInterval(autoPlay, 2000);
       
        // 鼠标划过整个容器时停止自动播放
        wrap.onmouseover = function () {
        clearInterval(timer);
        }
       
        // 鼠标离开整个容器时继续播放至下一张
        wrap.onmouseout = function () {
        timer = setInterval(autoPlay, 2000);
        }
        // 遍历所有数字导航实现划过切换至对应的图片
        for (var i = 0; i < list.length; i++) {
        list[i].onmouseover = function () {
        clearInterval(timer);
        index = this.innerText - 1;
        changePic(index);
        };
        };
       
        function autoPlay () {
        if (++index >= pic.length) index = 0;
        changePic(index);
        }
       
        // 定义图片切换函数
        function changePic (curIndex) {
        for (var i = 0; i < pic.length; ++i) {
        pic[i].style.display = "none";
        list[i].className = "";
        }
        pic[curIndex].style.display = "block";
        list[curIndex].className = "on";
        }
       
        };
      
        </script> 


</head>
<body>
    
    
    <!-- 顶部 -->
    <div class="top">
        <div class="context1">
            <h3 class="welcom">欢迎宝贝</h3>
            <div class="mmd"><img  src="images/mmd.gif"></div>
            <h1 class="what">我们的恋爱小屋</h1>
            <img src="images/zuo.jpg">
        </div>
    </div>
    <!-- 顶部导航栏 -->
    <div class="header">
        <div class="context2">
            <ul class="mulu">
                <li><a href="#">我的首页</a></li>
                <li><a href="record.html">纪念日志</a></li>
                <li><a href="#">爱的约定</a></li>
                <li><a href="#">服务商城</a></li>
                <li><a href="#">成长日志</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="wrap">
        <ul id="pic">
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>
        <li><img src="images/5.jpg" alt=""></li> 
        </ul>
        <ol id="list">
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        </ol>
        </div>
        <!-- 中间内容 -->
        <div class="mid">
        <div class="left">
            <div class="left_top"><img src="images/dd.png">爱情宝典</div>
            <div class="left-bottom">
                <div class="leftt">
                    <div class="name1"><strong>平凡的世界</strong></div>
                    <div class="name11"><img src="images/world.jpg"></div>
                    <div class="words1">即使有一天我要远走他乡，但愿我还能在梦中再回到这里来…——路遥《平凡的世界》</div>
                </div>
                <div class="rightt">
                    <div class="name1"><strong>简爱</strong></div>
                    <div class="name11"><img src="images/love.jpg"></div>
                    <div class="words1">我无法控制自己的眼睛，忍不住要去看他，就像口干舌燥的人明知水里有毒却还要喝一样。我本来无意去爱他，我也曾努力的掐掉爱的萌芽，但当我又见到他时，心底的爱又复活了。
                        ——夏洛蒂 勃朗特 《简爱》</div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="wenzhang">
                <div class="wz"><img src="images/word.png">好物文章</div>
                <ul class="ul1">
                    <li><a href="#">文章1</a></li>
                    <li><a href="#">文章2</a></li>
                    <li><a href="#">文章3</a></li>
                    <li><a href="#">文章4</a></li>
                    <li><a href="#">文章5</a></li>
                    <li><a href="#">文章6</a></li>
                    <li><a href="#">文章7</a></li>
                    <li><a href="#">文章8</a></li>
                </ul>
            </div>
            <div class="ours">
                <div class="our"><img src="images/call.png">联系我们</div>
            </div>
        </div>
    </div>
        <!-- 底部导航栏 -->
        <div class="end">
        <div class="endd">@right:白燕&欢迎您的投稿</div>
    </div>


    <script type="text/javascript" src="js/canvas-nest.js">
        //定义画布宽高和生成点的个数
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight,
            POINT = 35;
    
        var canvas = document.getElementById('Mycanvas');
        canvas.width = WIDTH,
            canvas.height = HEIGHT;
        var context = canvas.getContext('2d');
        context.strokeStyle = 'rgba(255,255,255,255.255)',
            context.strokeWidth = 1,
            context.fillStyle = 'rgba(255,255,255,255.255)';
        var circleArr = [];
    
        //线条：开始xy坐标，结束xy坐标，线条透明度
        function Line(x, y, _x, _y, o) {
            this.beginX = x,
                this.beginY = y,
                this.closeX = _x,
                this.closeY = _y,
                this.o = o;
        }
        //点：圆心xy坐标，半径，每帧移动xy的距离
        function Circle(x, y, r, moveX, moveY) {
            this.x = x,
                this.y = y,
                this.r = r,
                this.moveX = moveX,
                this.moveY = moveY;
        }
        //生成max和min之间的随机数
        function num(max, _min) {
            var min = arguments[1] || 0;
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        // 绘制原点
        function drawCricle(cxt, x, y, r, moveX, moveY) {
            var circle = new Circle(x, y, r, moveX, moveY)
            cxt.beginPath()
            cxt.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI)
            cxt.closePath()
            cxt.fill();
            return circle;
        }
        //绘制线条
        function drawLine(cxt, x, y, _x, _y, o) {
            var line = new Line(x, y, _x, _y, o)
            cxt.beginPath()
            cxt.strokeStyle = 'rgba(255,255,255,' + o + ')'
            cxt.moveTo(line.beginX, line.beginY)
            cxt.lineTo(line.closeX, line.closeY)
            cxt.closePath()
            cxt.stroke();
    
        }
        //每帧绘制
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            for(var i = 0; i < POINT; i++) {
                drawCricle(context, circleArr[i].x, circleArr[i].y, circleArr[i].r);
            }
            for(var i = 0; i < POINT; i++) {
                for(var j = 0; j < POINT; j++) {
                    if(i + j < POINT) {
                        var A = Math.abs(circleArr[i + j].x - circleArr[i].x),
                            B = Math.abs(circleArr[i + j].y - circleArr[i].y);
                        var lineLength = Math.sqrt(A * A + B * B);
                        var C = 1 / lineLength * 7 - 0.009;
                        var lineOpacity = C > 0.03 ? 0.03 : C;
                        if(lineOpacity > 0) {
                            drawLine(context, circleArr[i].x, circleArr[i].y, circleArr[i + j].x, circleArr[i + j].y, lineOpacity);
                        }
                    }
                }
            }
        }
        //初始化生成原点
        function init() {
            circleArr = [];
            for(var i = 0; i < POINT; i++) {
                circleArr.push(drawCricle(context, num(WIDTH), num(HEIGHT), num(15, 2), num(10, -10) / 40, num(10, -10) / 40));
            }
            draw();
        }
        //调用执行
        window.onload = function() {
            init();
            setInterval(function() {
                for(var i = 0; i < POINT; i++) {
                    var cir = circleArr[i];
                    cir.x += cir.moveX;
                    cir.y += cir.moveY;
                    if(cir.x > WIDTH) cir.x = 0;
                    else if(cir.x < 0) cir.x = WIDTH;
                    if(cir.y > HEIGHT) cir.y = 0;
                    else if(cir.y < 0) cir.y = HEIGHT;
                }
                draw();
            }, 10);
        }
    </script>
</body>
</html>

record_style.css

* {
    margin:0px;
    padding:0px;
}
.context {
    width: 1200px;
    height: 5730px;
    background-color: plum;
    margin: auto;
}
.kiss {
    position: fixed;
    left: 0px;
    top: 700px;
}
.top {
    width: 1200px;
    height: 60px;
    font-family: "华文彩云";
    background-color: salmon;
    margin: auto;
    font-size: 35px;
    text-align: center;
    line-height: 60px;
}
.first {
    margin-left: 25px;
    margin-top: 10px;
    width:500px;
    height: 5660px;
    border: 2px dashed salmon;
    float: left;
}
.im1>img {
    width: 50px;
    height: 50px;
    float: left;
    margin-left: 20px;
    margin-top: 5px;
}
.year {
    width:490px;
    height:50px;
    font-size :30px;
    padding-top: 6px;
    margin-left: 4px;
    background-color: salmon;
}
.y2016_first,.y2017_first {
    width:500px;
    height: 300px;
    
}
.year_first>ol {
    margin-left: 50px;
    font-size: 30px;;
}
.photo {
    width: 600px;
    height: 5660px;
    margin-right: 25px;
    float: right;
    margin-top: 10px;
    border: 2px dashed salmon;
}
.p17_6_6>img,.p18_9_22>img,.p18_10_26>img,
.p18_12_31>img,.p19_4_5>img,.p19_4_13>img,
.p19_8_31>img,.p20_1_20>img {
    width: 300px;
    height: 400px;
    float: left;
}
.words_1 {
    width: 280px;
    height: 400px;
    margin-left: 20px;
    font-size: 26px;
    float: left;
}
.words_2 {
    width: 280px;
    height: 400px;
    margin-left: 20px;
    font-size: 26px;
    float: left;
}
.p19_3_23>img {
    width: 300px;
    height: 150px;
}
.words_new {
    width: 550px;
    height: 100px;
    margin-left: 20px;
    font-size: 26px;
}
.p19_5_19>img {
    width: 300px;
    height: 300px;
    float: left;
}
.words_3 {
    width: 280px;
    height: 300px;
    margin-left: 20px;
    font-size: 26px;
    float: left;
}
.p19_10_5>img {
    width: 600px;
    height: 300px;
}
.p19_10_18>img {
    width: 300px;
    height: 500px;
    float: left;
}
.words_11 {
    width: 280px;
    height: 500px;
    margin-left: 20px;
    font-size: 26px;
    float: left;
}
.words_22 {
    width: 180px;
    height: 300px;
    margin-left: 20px;
    font-size: 26px;
    float: left;
}
.p19_10_27>img {
    width: 400px;
    height: 300px;
    float: left;
}
.p19_12_8>img {
    width: 300px;
    height: 300px;
}
.p20_4_4>img {
    width: 300px;
    height: 300px;
    float: left;
}

style.css

    margin:0;
    padding:0;
}
/* 顶部 */
.top {
    height: 100px;
    background-color: #DCDCDC;
}
.context1 {
    width: 1200px;
    height: 100px;
    margin: auto;
}
.welcom {
    width: 100px;
    height: 30px;
    margin-left: 20px;
    margin-top: 40px;
    float: left;
}
.what {
    color:	#778899;
    width:300px;
    height: 50px;
    margin-top: 25px;
    margin-left: 260px;
    float: left;
}
.context1>img {
    width: 100px;
    height: 100px;
    margin-left: 250px;
    margin-top: 0px;
    float: left;
}
.mmd>img {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    float: left;
}
/* 顶部导航栏 */
.header {
    height: 80px;
    margin-top: 10px;
}
.context2 {
    width: 1200px;
    height:60px;
    margin: auto;
    border-radius: 20px;
    background-color:thistle;
}
.context2>ul {
    list-style: none;
}
.mulu a {
    color: black;
    text-decoration: none;
}
.mulu>li {
    border:1px solid black;
    border-radius: 20px;
    width:120px;
    height:40px;
    float: left;
    padding-top: 5px;
    padding-left: 20px;
    margin-top: 7px;
    margin-left:45px;
    font-size: 25px;;
}
/* 轮播图 */
.wrap {
    width: 1200px;
    height:600px;
    margin-left: 360px;
    overflow: hidden;
    position: relative;
}
.wrap ul {
    list-style: none;
    position: absolute;
}
.wrap ul li {
    height: 550px;
    position: absolute;
}
.wrap ol {
    list-style: none;
    position: absolute;
    right: 5px;
    bottom: 10px;
}
.wrap ol li {
    height: 20px;
    width: 20px;
    background-color: #ccc;
    border: 1px solid #666;
    margin-left: 5px;
    color: #000;
    float: left;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
}
.wrap ol .on {
    background-color: thistle;
    color: #fff;
}
/* 中间内容 */
.mid {
    width: 1210px;
    height: 530px;
    margin: auto;
}
.left {
    width:900px;
    height: 500px;
    margin-top: 20px;;
    float: left;
}
.name1 {
    margin-top: 20px;
    margin-left:160px;
    font-size: 26px;
}
.name11>img {
    width: 250px;
    height:340px;
    margin-left:30px;
    margin-top:30px;
    float: left;
}
.words1 {
    margin-left: 310px;
    margin-top:50px;
    margin-right: 10px;
}
.right {
    width:300px;
    height: 510px;
    margin-top: 20px;
    margin-left: 10px;
    background-color: #ADADAD;
    float: left;
}
.left_top {
    width: 900px;
    height: 50px;
    font-size: 30px;
    background-color: thistle;
    float: left;
    color: #515151;
}
.wz {
    width: 300px;
    height:50px;
    font-size: 30px;
    background-color: thistle;
    color: #515151;
}
.our {
    width: 300px;
    height:50px;
    margin-top:50px;
    font-size: 30px;
    background-color: thistle;
    color: #515151;
}
.left_top>img,.our>img,.wz>img {
    width :50px;
    height: 50px;
    float: left;
}
.leftt {
    width: 445px;
    height: 450px;
    margin-top: 10px;
    background-color: #ADADAD;
    float: left;
}
.rightt {
    width: 445px;
    height: 450px;
    margin-top: 10px;
    margin-left: 10px;
    background-color: #ADADAD;
    float: left;
}
.ul1>li {
    font-size: 24px;
    margin-left:40px;
}
/* 底部导航栏 */
.end { 
    background-color: #DCDCDC ;
    margin-top: 20px;
    height:30px;
}
.endd {
    height:30px;
    width:1200px;
    color: gray;
    font-size:20px;
     margin-left:800px; 
}

canvas-net.js

! function() {
    //封装方法，压缩之后减少文件大小
    function get_attribute(node, attr, default_value) {
        return node.getAttribute(attr) || default_value;
    }
    //封装方法，压缩之后减少文件大小
    function get_by_tagname(name) {
        return document.getElementsByTagName(name);
    }
    //获取配置参数
    function get_config_option() {
        var scripts = get_by_tagname("script"),
            script_len = scripts.length,
            script = scripts[script_len - 1]; //当前加载的script
        return {
            l: script_len, //长度，用于生成id用
            z: get_attribute(script, "zIndex", -1), //z-index
            o: get_attribute(script, "opacity", 0.5), //opacity
            c: get_attribute(script, "color", "0,0,0"), //color
            n: get_attribute(script, "count", 99) //count
        };
    }
    //设置canvas的高宽
    function set_canvas_size() {
        canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, 
        canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    }

    //绘制过程
    function draw_canvas() {
        context.clearRect(0, 0, canvas_width, canvas_height);
        //随机的线条和当前位置联合数组
        var e, i, d, x_dist, y_dist, dist; //临时节点
        //遍历处理每一个点
        random_lines.forEach(function(r, idx) {
            r.x += r.xa, 
            r.y += r.ya, //移动
            r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1, 
            r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界，反向反弹
            context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
            //从下一个点开始
            for (i = idx + 1; i < all_array.length; i++) {
                e = all_array[i];
                //不是当前点
                if (null !== e.x && null !== e.y) {
                        x_dist = r.x - e.x, //x轴距离 l
                        y_dist = r.y - e.y, //y轴距离 n
                        dist = x_dist * x_dist + y_dist * y_dist; //总距离, m
                    dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
                        d = (e.max - dist) / e.max, 
                        context.beginPath(), 
                        context.lineWidth = d / 2, 
                        context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")", 
                        context.moveTo(r.x, r.y), 
                        context.lineTo(e.x, e.y), 
                        context.stroke());
                }
            }
        }), frame_func(draw_canvas);
    }
    //创建画布，并添加到body中
    var the_canvas = document.createElement("canvas"), //画布
        config = get_config_option(), //配置
        canvas_id = "c_n" + config.l, //canvas id
        context = the_canvas.getContext("2d"), canvas_width, canvas_height, 
        frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
            window.setTimeout(func, 1000 / 45);
        }, random = Math.random, 
        current_point = {
            x: null, //当前鼠标x
            y: null, //当前鼠标y
            max: 20000
        },
        all_array;
    the_canvas.id = canvas_id;
    the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
    get_by_tagname("body")[0].appendChild(the_canvas);
    //初始化画布大小

    set_canvas_size(), window.onresize = set_canvas_size;
    //当时鼠标位置存储，离开的时候，释放当前位置信息
    window.onmousemove = function(e) {
        e = e || window.event, current_point.x = e.clientX, current_point.y = e.clientY;
    }, window.onmouseout = function() {
        current_point.x = null, current_point.y = null;
    };
    //随机生成config.n条线位置信息
    for (var random_lines = [], i = 0; config.n > i; i++) {
        var x = random() * canvas_width, //随机位置
            y = random() * canvas_height,
            xa = 2 * random() - 1, //随机运动方向
            ya = 2 * random() - 1;
        random_lines.push({
            x: x,
            y: y,
            xa: xa,
            ya: ya,
            max: 6000 //沾附距离
        });
    }
    all_array = random_lines.concat([current_point]);
    //0.1秒后绘制
    setTimeout(function() {
        draw_canvas();
    }, 100);
}();
萌级小菜鸟丫
关注
  • 66
    点赞
  • 踩
  • 515
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
HTML静态网页作业——我的家乡安庆
QQ_____365392777的博客
08-11 3123
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......
学生HTML网页作业：基于HTML+CSS+JavaScript画家企业8页
QQ_____365392777的博客
08-06 1670
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站......
html+css+简单的js制作的超市页面
09-12
超市界面设计
用HTML+CSS+JS搭建一个超简单的静态实用网站页面
xy_9999的博客
02-20 5327
静态页面，背景颜色渐变效果，文字动效，响应式布局，页面返回顶部
用HTML+CSS+JS做一个漂亮简单的游戏网页——全屏游戏美术大赛作品(4个滚动页面)
最新发布
网页设计与制作 | HTML+CSS+JS
05-25 358
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
HTML+CSS+JS大作业——新能源汽车资讯门户(11页) web前端设计与开发期末作品/期末大作业
12-04 252
HTML+CSS+JS大作业——新能源汽车资讯门户(11页) web前端设计与开发期末作品/期末大作业 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关
大二学生基于Html+Css+javascript的网页制作——动漫设计公司响应式网站模板 (10个页面)
html精品源码
12-16 933
可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web...
《html+css+javascript 网页制作案例教程》源代码
04-02
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...
基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip
09-25
基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript...
美食网站js+html+css
01-03
【美食网站js+html+css】是一个以JavaScript、HTML和CSS为核心技术的项目，旨在创建一个展示美食的网站。这个项目提供了完整的源代码，包括HTML结构文件、CSS样式表和JavaScript脚本，以及用于视觉呈现的网站图片。...
HTML+CSS+JS构建的电商网站页面（源码）
07-14
在本项目中，"HTML+CSS+JS构建的电商网站页面（源码）"是一个针对初学者和学生设计的Web前端开发实践项目。这个项目利用HTML、CSS和JavaScript这三种核心技术来创建一个基本的电商网站界面，是学习前端开发的重要...
html+css+js电商网页
12-06
html+css+js电商网页
网页设计与制作(HTML+CSS+JavaScript)
01-30
网页设计与制作(HTML+CSS+JavaScript)，资源总大小：786.6MB，欢迎下载
个人博客html+css+JavaScript完整代码
05-23
个人博客，基于html+css+JavaScript的完整代码，内容全面可以直接使用。
【狂神说】HTML+CSS+JS
weixin_56580267的博客
07-06 5971
html+css+js从小白到入门
使用HTML制作一个简单的个人主页
m0_67394360的博客
03-06 9602
此网页是我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落的细节处理、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版
HTML+CSS实现淘宝首页
热门推荐
道阻且长，行则将至。
01-03 3万+
一、HTML+CSS实现淘宝首页 仿写淘宝页面，趁着元旦假期终于把这个淘宝页面给做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦，我会不定期的跟大家分享文章。 二、页面结构如下： ...
使用原生js写一个简单的注册登录页面
apple_61973423的博客
08-15 2万+
使用JavaScript写的登录注册页面
HTML+CSS+JS学习（持续更新中）
m0_46486963的博客
10-28 5302
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置使用a标签来定义超链接，href属性指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素，那么嵌套的元素就相当于一个超链接。在网页中HTML专门用来负责网页的结构，所以在使用HTML标签的时候，应该关注的是标签的语义，而不是他的样式，这里先介绍几个基本的于一标签，还有些常用的标签放在后面具体讲解。标签用来向页面中引入一个外部的音频文件。
html+css+js制作个人博客网站
09-08
要制作一个个人博客网站，我们可以使用HTML、CSS和JavaScript这三种技术。 首先，我们可以使用HTML来构建网页的基本结构。HTML可以定义网页的标题、段落、链接、图像等元素。通过HTML，我们可以创建一个包含博客...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值