Who can tell me the general idea of making a web interface? _html/css

I am a newbie and have already completed the database-related design, but now I am just missing the interface.
I have a design in mind that I want to complete, but I don’t know how to achieve it.
It's roughly like this:
The top 10-20% of the browser is the logo and background
Then the left 20% is the hyperlink list, and the right 80% is the web page that appears when you click the hyperlink on the left.
!!!!!!!
I don’t know how to implement it! ! ! ! ! ! And I don’t know how to present the list tags with a background. Every time it is presented, it is ·xxxxx

I tried copying the source code of w3c to my compiler, and then compiled it, but nothing happened. The background image is just a list.

Reply to the discussion (solution)

Find a website online for reference.

Just pretend that I can’t read Chinese, can you explain your needs with pictures? . . .

Brother, please give me a rough picture. It can be a sketch or a pencil drawing.

At least this way I can give you a rough layout.

I don’t know if I am good at Chinese, so I probably wrote one. The effect is as follows:

The code is as follows [using bootstrap, you can refer to: http://www.bootcss.com]:

<!DOCTYPE html><html xmlns:form="http://www.w3.org/1999/html"><head lang="en">    <meta charset="UTF-8">    <title>申请管理</title>    <meta name="viewport" content="width=device-width,initial-scale=1.0">    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>    <style type="text/css">        .left {            width: 80px;            float: left;            background-color: #cccccc;        }    </style></head><body><header class="page-header">    这里是头部</header><div class="container left">    <nav class="text-center">        <ul class="list-unstyled">            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>        </ul>    </nav></div><div class="container-fluid">    <div class="embed-responsive embed-responsive-16by9">        <iframe class="embed-responsive-item" name="rightcontent" src="about:blank"></iframe>    </div></div><footer>    这是底部文本</footer></body></html>

Copy after login

Newbie My priority is to learn
An impetuous spirit

I don’t know if I am good at Chinese, so I probably wrote one. The effect is as follows:

The code is as follows [using bootstrap, you can refer to: http://www.bootcss.com]:

<!DOCTYPE html><html xmlns:form="http://www.w3.org/1999/html"><head lang="en">    <meta charset="UTF-8">    <title>申请管理</title>    <meta name="viewport" content="width=device-width,initial-scale=1.0">    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>    <style type="text/css">        .left {            width: 80px;            float: left;            background-color: #cccccc;        }    </style></head><body><header class="page-header">    这里是头部</header><div class="container left">    <nav class="text-center">        <ul class="list-unstyled">            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>            <li><a href="http://www.baidu.com" target="rightcontent">百度</a></li>            <li><a href="http://www.sina.com.cn" target="rightcontent">新浪</a></li>            <li><a href="http://www.ifeng.com" target="rightcontent">凤凰</a></li>        </ul>    </nav></div><div class="container-fluid">    <div class="embed-responsive embed-responsive-16by9">        <iframe class="embed-responsive-item" name="rightcontent" src="about:blank"></iframe>    </div></div><footer>    这是底部文本</footer></body></html>

Copy after login

Thank you That’s it for me Study your code carefully

Well, come on, but it will be more convenient to have a picture next time you post.

I don’t know if I am good at Chinese, so I probably wrote one. The effect is as follows:

The code is as follows [using bootstrap, you can refer to: http://www.bootcss.com]:

Thank you. That’s it. I will study your code carefully.