从初学者到专家每个开发人员都应该知道的7个常见Web开发问题[with…
Web开发可能是一项复杂的任务，因为它涉及许多技术和语言，例如HTML，JavaScript和PHP，ASP.NET，My SQL和AJAX 。 从几个小时到几天，您可能会陷入困境。 由于可能没有地方可以找到您的解决方案，因此这可能非常令人沮丧。 在我的Web开发生涯中，我碰巧遇到了很多问题，但是幸运的是我及时得到了他们的解决方案。
因此，我决定编写本教程，以指出每个初学者，中级或专家开发人员都应解决的5个常见Web开发问题。 因此，在不浪费更多时间的情况下，让我们一一介绍。
问题1：将CSS应用于字符的一半
我们大多数人都认为CSS可以应用于任何字符，但不能应用于字符的一半。 但是您错了，因为有一种方法可以将CSS应用于任何字符的一半。
您可以使用名为HalfStyle的插件 ，可以从GitHub下载
使用此插件，您可以以非常简单的方式在垂直或水平方向上设置字符的每半或三分之一（甚至整个文本段）的样式。
安装
从GitHub下载插件zip文件，并将文件夹解压缩到您的网站。
接下来， 将对HalfStyle CSS，JS和jQuery的引用添加到网页的头部，例如：
<link href="HalfStyle-master/css/halfstyle.css" rel="stylesheet" />
<script type="text/javascript" src="HalfStyle-master/js/jquery.min.js"></script>
<script type="text/javascript" src="HalfStyle-master/js/halfstyle.js"></script>
现在您可以使用它了。
对于单个字符
将类'.halfStyle'添加到包含要半样式化的字符的元素中。 并为其赋予data-content="character"属性（将字符替换为您要设置样式的字符，例如'X'或'Y'）。
示例1：字符X水平设置为一半
<span class="halfStyle hs-horizontal-half" data-content="X">X</span>
示例2：字符Y的水平样式为第三个
<span class="halfStyle hs-horizontal-third" data-content="Y">Y</span>
示例3：字符X垂直设置为第三个样式
<span class="halfStyle hs-vertical-third" data-content="X">X</span>
示例4：字符Y的垂直样式为一半
<span class="halfStyle hs-vertical-half" data-content="Y">Y</span>
CSS类-“ hs-horizontal-half ”，“ hs-horizontal-third ”，“ hs-vertical-half ”，“ hs-vertical-third ”是自定义CSS类，在HalfStyle.css文件中定义。
您可以根据需要在' : before '和' :after '类中更改其属性，例如颜色，字体等。
对于文本
将.textToHalfStyle类和数据属性data-halfstyle=“[-CustomClassName-]”到包含文本的元素中。
示例1：垂直样式为一半的文本
<span class="textToHalfStyle" data-halfstyle="hs-vertical-half">Half-style, please.</span>
示例2：垂直样式为第三的文本
<span class="textToHalfStyle" data-halfstyle="hs-vertical-third">Half-style, please.</span>
示例3：水平样式为第三的文本
<span class="textToHalfStyle" data-halfstyle="hs-horizontal-half">Half-style, please.</span>
示例4：水平样式为一半的文本
<span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>
问题2：如何在不重新加载页面的情况下修改URL
每个JavaScript初学者都知道' window.location.href '将重新加载页面。 因此，为了在不重新加载页面的情况下更改页面的URL，应使用' pushState() '方法。
示例：创建一个按钮，单击该按钮将更改URL：
<button οnclick="changeURL()">Click here</button>
<script>
function changeURL() {
window.history.pushState('page2', 'Title', '/about.html');
}
</script>
我使用pushState()方法将URL更改为about.html 。 此方法具有3个参数：
1. state-状态对象是一个JavaScript对象，它与pushState()创建的新历史记录条目相关联。 每当用户导航到新状态时， popstate触发popstate事件，并且该事件的state属性包含历史记录条目的状态对象的副本。
title —您要移至的州的简称。
URL —新的URL由此参数指定。 请注意，在调用pushState()之后，浏览器将不会尝试加载此URL，但是它可能稍后会尝试加载URL，例如在用户重新启动浏览器之后。
请注意，您可以使用jQuery Load方法-load（）重新加载新URL的内容。 .load()方法是一种非常强大的AJAX方法，它不仅可以获取另一个页面的完整HTML内容，而且还可以基于其CSS类和Ids获取元素的内容。
问题3：为文本提供透明背景
有两种方法可以解决此问题，它们是：
1.制作透明的背景图片
在这里，您可以创建一个.png格式的小1px*1px透明点图像。 我在Photoshop中创建了这张图片，它的大小只有95 bytes 。 该图像为浅灰色，如下所示：
现在，要将此图像用作背景，我必须使用CSS的background属性的URL值，如下所示：
background: url("Content/Images/translucent.png") repeat;让我们来看一个例子。
像这样创建2个div：
<div class="containerDiv">
<div class="transparentDiv">
How is the weather in your city?
</div>
</div>
现在，将这些div的CSS添加到样式表中，如下所示：
.containerDiv {
height: 200px;
width: 500px;
background-color: blue;
position: relative;
}.transparentDiv {
color: orange;
font-size: 38px;
padding: 30px;
background: url("Content/Images/translucent.png") repeat;
position: absolute;
left: -25px;
width: 100%;
top: 40px;
}请注意，“ transparentDiv”位于“ containerDiv”上方，并为其提供了position：absolute属性。 还要注意background属性，在该属性中我已将图像设置为“ transparentDiv”的背景。
当您在网页中运行此代码时，它将如下所示：
2.使用CSS 3背景颜色属性
可以使用CSS 3 backgound-colo r属性来代替使用背景透明图像（如上所述）。 您所要做的就是将此属性添加到“ .transparentDiv” CSS中，并注释掉以前的背景属性，如下所示：
background-color: rgba(240, 240, 240, 0.5);
/*background: url("Content/Images/translucent.png") repeat;*/
我已将rgba颜色格式的浅灰色背景指定为rgba ，并且还使用0.5作为不透明度来带来所需的透明外观。
问题4：使用CSS将文字垂直居中
有许多方法可以使文本垂直对齐。 您可以使用CSS的line-height属性或使用绝对定位来实现。 我认为，仅使用“ display”属性即可非常轻松地完成此操作。 执行此操作的2种方法是：
1.使用display：flex属性
在这里，我将使用Flexbox并为元素提供以下CSS属性：
display: flex;
align-items: center;
示例：在您的网页中添加以下div
<div class="box">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>
还要添加CSS ，以使div中包含的文本垂直对齐。
.box {
height: 150px;
width: 300px;
background: #CCC;
color: #000;
font-size: 24px;
font-style: oblique;
text-align: center;
display: flex;
align-items: center;
}注意：最后2个属性可以使文本垂直对齐。
现在运行网页中的代码，您将看到文本垂直居中对齐，如下所示：
2.使用display：table属性
在这种方法中，由于表格支持垂直居中对齐，因此我使用CSS来模拟表格行为。 此处，父div带有display：table属性，而子元素具有2个属性，分别是：
display: table-cell;
vertical-align: middle;
示例：让我显示一个包含3 div（并排对齐）的示例。 每个div都有不同长度的文本，这些文本都以垂直居中的方式对齐。
将以下代码添加到您的页面：
<div class="verticallyCenter">
<div>First</div>
<div>This is the Second div</div>
<div>Third div</div>
</div>
有一个父div具有称为“ verticalCenter”的CSS类。 该div包含3个子div。
接下来，将以下CSS添加到您的页面：
.verticallyCenter {
background-color: red;
display: table;
height: 100px;
}.verticallyCenter div {
font-size: 25px;
display: table-cell;
vertical-align: middle;
width: 33%;
padding: 5px;
}请注意，“ verticalCenter” div包含的是display：table，而3个子级具有以下2个重要属性：
display: table-cell;
vertical-align: middle;
现在，在浏览器中运行您的网页，它将如下所示：
问题5：如何使div的浏览器窗口高度为100％
您可以通过使用相对于初始包含块（即body标签）大小的视口百分比长度来实现。 当窗口的高度或宽度改变时，它们会相应缩放。
这些单位是vh（视口高度），vw（视口宽度），vmin（视口最小长度）和vmax（视口最大长度）。
我们可以使用vh: 1vh等于视口高度的1％。 也就是说， 100vh等于浏览器窗口的高度。
因此，follow div（如下所示）等于浏览器窗口的高度，无论它在DOM树中的位置如何：
<div style="height: 100vh">Some content</div>
100vh与100％有何不同？
考虑以下示例：
<div style="height:200px">
<p style="height:100%;">Hello, world!</p>
</div>
在这里，“ Hello world”段落元素的高度为200px，因为为父div提供了200px的高度。
现在将p元素的高度更改为100vh ，如下所示：
<div style="height:200px">
<p style="height:100vh;">Hello, world!</p>
</div>
现在，不管div的高度如何，段落元素都将是实体的100％的高度。
问题6：如何知道选择了哪个单选按钮
要找出选择了哪个单选按钮，可以使用jQuery或JavaScript。 假设有3个单选按钮用于选择一个人的性别。 所有这些单选按钮都有一个通用名称，称为“性别”。
<input type="radio" name="sex" value="Male" />Male
<input type="radio" name="sex" value="Female" />Female
<input type="radio" name="sex" value="Unspecified" />Unspecified
现在，在您的jQuery代码中，创建这些单选按钮的click事件。 然后使用.val（）方法找出所选单选按钮的值。 该代码如下：
$("input[name='sex']").click(function () {
alert($(this).val());
});该复选框与单选按钮类似，但您可以为一个选项选择多个复选框。 jQuery Checkbox Checked教程是您学习所有使用checkbox选中或取消选中方法的地方。
问题7：以水平居中的方式对齐文本和元素
使用text-align：center将文本放置在元素的水平中间。 例如，在您的网页中添加以下div：
<div class="container">
Lorem ipsum dolor sit amet
</div>
还将以下CSS添加到样式表中：
.container {
width: 500px;
background-color: brown;
color: orange;
font-size: 38px;
text-align: center;
}注意，我在CSS中以text-align为中心。 在浏览器中运行该文本时，文本将放置在div的中心。 如下图所示：
当您要将整个元素对齐到其父元素的中心时，可以在CSS中使用'margin：auto'。 此方法用于将整个网站内容与页面中间对齐。
现在更新上面的div，以包括将放在中间的子div。 代码如下：
<div class="container">
<div class="centerDiv">
Lorem ipsum dolor sit amet
</div>
</div>
为centerDiv添加以下CSS：
.centerDiv {
background: #67b91e;
width: 200px;
margin: auto;
}注意边距：自动赋予centerDiv。
现在，在浏览器中运行该网页，您将看到centerDiv在其父级的中心对齐。 检查下图：
结论
我希望您能在本教程中找到一些新知识来增加您的Web开发知识。 如果是这样，那就别忘了鼓掌几次以示自己的喜好。 它不仅会带给我不好的笑容，而且会激励我为Web开发人员写越来越多的好文章。
与往常一样，每当我在Medium上发表新文章时，请关注我以获取通知。
还要查看我在HACKERNOON中的其他文章— ASP.NET Core —如何在Entity Framework Core中使用依赖注入